[Playlist] Pull in sorting changes from desktop + Add Drag-n-Drop + Handle unavailable/deleted claims (#641)

* Add ordering Icons

* Refactor doCollectionEdit

- It required claims as parameter, when only uris are used to populate the collection, so that was changed to pass down the uris instead.
- There were unused and mostly unnecessary functions inside, for example the parameter claimIds was never used so it would never enter the claimSearch function which again would be used to generate uris, so it's better to just use uris as parameter

* Add List Reordering changes

* Add toggle button for list editing

* Add toggle on content page collection sidebar

* Enable drag-n-drop to re-order list items

https://www.youtube.com/watch?v=aYZRRyukuIw

* Allow removing all unavailable claims from a List

* Fix <g> on icons

* Fix section buttons positioning

* Move preventDefault and stopPropagation to buttons div instead of each button, preventing clicking even if disabled opening the claim

* Change dragging cursor

* Fix sizing

* Fix dragging component

* Restrict dragging to vertical axis

* Ignore shuffle state for ordering

* Fix console errors

* Mobile fixes

* Fix sidebar spacing

* Fix grey on mobile after click

.flowconfig

@@ -2,7 +2,8 @@
 .*\.typeface\.json
 .*/node_modules/findup/.*
 .*/node_modules/react-plastic/.*
-
+.*/node_modules/raf-schd/.*
+.*/node_modules/react-beautiful-dnd/.*
 
 [include]
 

flow-typed/Collections.js

@@ -24,9 +24,8 @@ declare type CollectionGroup = {
 }
 
 declare type CollectionEditParams = {
-  claims?: Array<Claim>,
+  uris?: Array<string>,
   remove?: boolean,
-  claimIds?: Array<string>,
   replace?: boolean,
   order?: { from: number, to: number },
   type?: string,

package.json

@@ -67,6 +67,7 @@
     "player.js": "^0.1.0",
     "proxy-polyfill": "0.1.6",
     "re-reselect": "^4.0.0",
+    "react-beautiful-dnd": "^13.1.0",
     "react-datetime-picker": "^3.4.3",
     "react-plastic": "^1.1.1",
     "react-top-loading-bar": "^2.0.1",

ui/component/claimCollectionAdd/view.jsx

@@ -79,15 +79,7 @@ const ClaimCollectionAdd = (props: Props) => {
                   .filter((list) => (isChannel ? list.type === 'collection' : list.type === 'playlist'))
                   .map((l) => {
                     const { id } = l;
-                    return (
+                    return <CollectionSelectItem collectionId={id} uri={permanentUrl} key={id} category={'builtin'} />;
-                      <CollectionSelectItem
-                        claim={claim}
-                        collectionId={id}
-                        uri={permanentUrl}
-                        key={id}
-                        category={'builtin'}
-                      />
-                    );
                   })}
                 {unpublished &&
                   (Object.values(unpublished): any)
@@ -96,13 +88,7 @@ const ClaimCollectionAdd = (props: Props) => {
                     .map((l) => {
                       const { id } = l;
                       return (
-                        <CollectionSelectItem
+                        <CollectionSelectItem collectionId={id} uri={permanentUrl} key={id} category={'unpublished'} />
-                          claim={claim}
-                          collectionId={id}
-                          uri={permanentUrl}
-                          key={id}
-                          category={'unpublished'}
-                        />
                       );
                     })}
                 {published &&
@@ -110,13 +96,7 @@ const ClaimCollectionAdd = (props: Props) => {
                     // $FlowFixMe
                     const { id } = l;
                     return (
-                      <CollectionSelectItem
+                      <CollectionSelectItem collectionId={id} uri={permanentUrl} key={id} category={'published'} />
-                        claim={claim}
-                        collectionId={id}
-                        uri={permanentUrl}
-                        key={id}
-                        category={'published'}
-                      />
                     );
                   })}
               </div>

ui/component/claimList/view.jsx

@@ -1,4 +1,8 @@
 // @flow
+
+// $FlowFixMe
+import { Draggable } from 'react-beautiful-dnd';
+
 import { MAIN_CLASS } from 'constants/classnames';
 import type { Node } from 'react';
 import React, { useEffect } from 'react';
@@ -48,6 +52,9 @@ type Props = {
   excludeUris?: Array<string>,
   loadedCallback?: (number) => void,
   swipeLayout: boolean,
+  showEdit?: boolean,
+  droppableProvided?: any,
+  unavailableUris?: Array<string>,
 };
 
 export default function ClaimList(props: Props) {
@@ -82,6 +89,9 @@ export default function ClaimList(props: Props) {
     excludeUris = [],
     loadedCallback,
     swipeLayout = false,
+    showEdit,
+    droppableProvided,
+    unavailableUris,
   } = props;
 
   const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW);
@@ -149,6 +159,30 @@ export default function ClaimList(props: Props) {
     }
   }, [loading, onScrollBottom, urisLength, pageSize, page]);
 
+  const getClaimPreview = (uri: string, index: number, draggableProvided?: any) => (
+    <ClaimPreview
+      uri={uri}
+      indexInContainer={index}
+      type={type}
+      active={activeUri && uri === activeUri}
+      hideMenu={hideMenu}
+      includeSupportAction={includeSupportAction}
+      showUnresolvedClaim={showUnresolvedClaims}
+      properties={renderProperties || (type !== 'small' ? undefined : false)}
+      renderActions={renderActions}
+      showUserBlocked={showHiddenByUser}
+      showHiddenByUser={showHiddenByUser}
+      collectionId={collectionId}
+      showNoSourceClaims={showNoSourceClaims}
+      customShouldHide={customShouldHide}
+      onClick={handleClaimClicked}
+      swipeLayout={swipeLayout}
+      showEdit={showEdit}
+      dragHandleProps={draggableProvided && draggableProvided.dragHandleProps}
+      unavailableUris={unavailableUris}
+    />
+  );
+
   return tileLayout && !header ? (
     <section className={classnames('claim-grid', { 'swipe-list': swipeLayout })}>
       {urisLength > 0 &&
@@ -207,30 +241,44 @@ export default function ClaimList(props: Props) {
             'claim-list--card-body': tileLayout,
             'swipe-list': swipeLayout,
           })}
+          {...(droppableProvided && droppableProvided.droppableProps)}
+          ref={droppableProvided && droppableProvided.innerRef}
         >
-          {sortedUris.map((uri, index) => (
+          {injectedItem && sortedUris.some((uri, index) => index === 4) && <li>{injectedItem}</li>}
-            <React.Fragment key={uri}>
+
-              {injectedItem && index === 4 && <li>{injectedItem}</li>}
+          {sortedUris.map((uri, index) =>
-              <ClaimPreview
+            droppableProvided ? (
-                uri={uri}
+              <Draggable key={uri} draggableId={uri} index={index}>
-                indexInContainer={index}
+                {(draggableProvided, draggableSnapshot) => {
-                type={type}
+                  // Restrict dragging to vertical axis
-                active={activeUri && uri === activeUri}
+                  // https://github.com/atlassian/react-beautiful-dnd/issues/958#issuecomment-980548919
-                hideMenu={hideMenu}
+                  let transform = draggableProvided.draggableProps.style.transform;
-                includeSupportAction={includeSupportAction}
+
-                showUnresolvedClaim={showUnresolvedClaims}
+                  if (draggableSnapshot.isDragging && transform) {
-                properties={renderProperties || (type !== 'small' ? undefined : false)}
+                    transform = transform.replace(/\(.+,/, '(0,');
-                renderActions={renderActions}
+                  }
-                showUserBlocked={showHiddenByUser}
+
-                showHiddenByUser={showHiddenByUser}
+                  const style = {
-                collectionId={collectionId}
+                    ...draggableProvided.draggableProps.style,
-                showNoSourceClaims={showNoSourceClaims}
+                    transform,
-                customShouldHide={customShouldHide}
+                  };
-                onClick={handleClaimClicked}
+
-                swipeLayout={swipeLayout}
+                  return (
-              />
+                    <li ref={draggableProvided.innerRef} {...draggableProvided.draggableProps} style={style}>
-            </React.Fragment>
+                      {/* https://github.com/atlassian/react-beautiful-dnd/issues/1756 */}
-          ))}
+                      <div style={{ display: 'none' }} {...draggableProvided.dragHandleProps} />
+
+                      {getClaimPreview(uri, index, draggableProvided)}
+                    </li>
+                  );
+                }}
+              </Draggable>
+            ) : (
+              getClaimPreview(uri, index)
+            )
+          )}
+
+          {droppableProvided && droppableProvided.placeholder}
         </ul>
       )}
 

ui/component/claimMenuList/view.jsx

@@ -166,11 +166,9 @@ function ClaimMenuList(props: Props) {
     doToast({
       message: source ? __('Item removed from %name%', { name }) : __('Item added to %name%', { name }),
     });
-    doCollectionEdit(collectionId, {
+    if (contentClaim) {
-      claims: [contentClaim],
+      doCollectionEdit(collectionId, { uris: [contentClaim.permanent_url], remove: source, type: 'playlist' });
-      remove: source,
+    }
-      type: 'playlist',
-    });
   }
 
   function handleFollow() {

ui/component/claimPreview/index.js

@@ -11,14 +11,9 @@ import {
   selectDateForUri,
 } from 'redux/selectors/claims';
 import { makeSelectStreamingUrlForUri } from 'redux/selectors/file_info';
-import {
+import { makeSelectCollectionIsMine } from 'redux/selectors/collections';
-  makeSelectCollectionIsMine,
-  makeSelectUrlsForCollectionId,
-  makeSelectIndexForUrlInCollection,
-} from 'redux/selectors/collections';
 
 import { doResolveUri } from 'redux/actions/claims';
-import { doCollectionEdit } from 'redux/actions/collections';
 import { doFileGet } from 'redux/actions/file';
 import { selectBanStateForUri } from 'lbryinc';
 import { selectIsActiveLivestreamForUri } from 'redux/selectors/livestream';
@@ -55,8 +50,6 @@ const select = (state, props) => {
     isLivestream,
     isLivestreamActive: isLivestream && selectIsActiveLivestreamForUri(state, props.uri),
     isCollectionMine: makeSelectCollectionIsMine(props.collectionId)(state),
-    collectionUris: makeSelectUrlsForCollectionId(props.collectionId)(state),
-    collectionIndex: makeSelectIndexForUrlInCollection(props.uri, props.collectionId)(state),
     lang: selectLanguage(state),
   };
 };
@@ -64,7 +57,6 @@ const select = (state, props) => {
 const perform = (dispatch) => ({
   resolveUri: (uri) => dispatch(doResolveUri(uri)),
   getFile: (uri) => dispatch(doFileGet(uri, false)),
-  editCollection: (id, params) => dispatch(doCollectionEdit(id, params)),
 });
 
 export default connect(select, perform)(ClaimPreview);

ui/component/claimPreview/view.jsx

@@ -32,8 +32,7 @@ import ClaimPreviewLoading from './claim-preview-loading';
 import ClaimPreviewHidden from './claim-preview-no-mature';
 import ClaimPreviewNoContent from './claim-preview-no-content';
 import { ENABLE_NO_SOURCE_CLAIMS } from 'config';
-import Button from 'component/button';
+import CollectionEditButtons from 'component/collectionEditButtons';
-import * as ICONS from 'constants/icons';
 
 const AbandonedChannelPreview = lazyImport(() =>
   import('component/abandonedChannelPreview' /* webpackChunkName: "abandonedChannelPreview" */)
@@ -79,10 +78,7 @@ type Props = {
   isLivestream?: boolean,
   isLivestreamActive: boolean,
   collectionId?: string,
-  editCollection: (string, CollectionEditParams) => void,
   isCollectionMine: boolean,
-  collectionUris: Array<Collection>,
-  collectionIndex?: number,
   disableNavigation?: boolean,
   mediaDuration?: string,
   date?: any,
@@ -90,6 +86,9 @@ type Props = {
   channelSubCount?: number,
   swipeLayout: boolean,
   lang: string,
+  showEdit?: boolean,
+  dragHandleProps?: any,
+  unavailableUris?: Array<string>,
 };
 
 const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
@@ -143,15 +142,15 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     isLivestream,
     isLivestreamActive,
     collectionId,
-    collectionIndex,
-    editCollection,
     isCollectionMine,
-    collectionUris,
     disableNavigation,
     indexInContainer,
     channelSubCount,
     swipeLayout = false,
     lang,
+    showEdit,
+    dragHandleProps,
+    unavailableUris,
   } = props;
 
   const isCollection = claim && claim.value_type === 'collection';
@@ -162,9 +161,10 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     claim === undefined || (claim !== null && claim.value_type === 'channel' && isEmpty(claim.meta) && !pending);
   const abandoned = !isResolvingUri && !claim;
   const isMyCollection = listId && (isCollectionMine || listId.includes('-'));
+  if (isMyCollection && claim === null && unavailableUris) unavailableUris.push(uri);
+
   const shouldHideActions = hideActions || isMyCollection || type === 'small' || type === 'tooltip';
   const canonicalUrl = claim && claim.canonical_url;
-  const lastCollectionIndex = collectionUris ? collectionUris.length - 1 : 0;
   const channelSubscribers = React.useMemo(() => {
     if (channelSubCount === undefined) {
       return <span />;
@@ -195,6 +195,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     claim && claim.repost_channel_url && claim.value_type === 'channel'
       ? claim.permanent_url || claim.canonical_url
       : undefined;
+  const repostedContentUri = claim && (claim.reposted_claim ? claim.reposted_claim.permanent_url : claim.permanent_url);
 
   // Get channel title ( use name as fallback )
   let channelTitle = null;
@@ -349,9 +350,14 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
             'claim-preview--channel': isChannelUri,
             'claim-preview--visited': !isChannelUri && !claimIsMine && hasVisitedUri,
             'claim-preview--pending': pending,
+            'claim-preview--collection-mine': isMyCollection && showEdit,
             'swipe-list__item': swipeLayout,
           })}
         >
+          {isMyCollection && showEdit && (
+            <CollectionEditButtons uri={uri} collectionId={listId} dragHandleProps={dragHandleProps} />
+          )}
+
           {isChannelUri && claim ? (
             <UriIndicator focusable={false} uri={uri} link>
               <ChannelThumbnail uri={uri} small={type === 'inline'} />
@@ -362,7 +368,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
                 <NavLink aria-hidden tabIndex={-1} {...navLinkProps}>
                   <FileThumbnail thumbnail={thumbnailUrl}>
                     <div className="claim-preview__hover-actions">
-                      {isPlayable && <FileWatchLaterLink focusable={false} uri={uri} />}
+                      {isPlayable && <FileWatchLaterLink focusable={false} uri={repostedContentUri} />}
                     </div>
                     {/* @if TARGET='app' */}
                     <div className="claim-preview__hover-actions">
@@ -404,58 +410,6 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
                 {!pending && (
                   <>
                     {renderActions && claim && renderActions(claim)}
-                    {Boolean(isMyCollection && listId) && (
-                      <>
-                        <div className="collection-preview__edit-buttons">
-                          <div className="collection-preview__edit-group">
-                            <Button
-                              button="alt"
-                              className={'button-collection-order'}
-                              disabled={collectionIndex === 0}
-                              icon={ICONS.UP}
-                              onClick={(e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                if (editCollection) {
-                                  // $FlowFixMe
-                                  editCollection(listId, {
-                                    order: { from: collectionIndex, to: Number(collectionIndex) - 1 },
-                                  });
-                                }
-                              }}
-                            />
-                            <Button
-                              button="alt"
-                              className={'button-collection-order'}
-                              icon={ICONS.DOWN}
-                              disabled={collectionIndex === lastCollectionIndex}
-                              onClick={(e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                if (editCollection) {
-                                  // $FlowFixMe
-                                  editCollection(listId, {
-                                    order: { from: collectionIndex, to: Number(collectionIndex + 1) },
-                                  });
-                                }
-                              }}
-                            />
-                          </div>
-                          <div className="collection-preview__edit-group">
-                            <Button
-                              button="alt"
-                              icon={ICONS.DELETE}
-                              onClick={(e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                // $FlowFixMe
-                                if (editCollection) editCollection(listId, { claims: [claim], remove: true });
-                              }}
-                            />
-                          </div>
-                        </div>
-                      </>
-                    )}
                     {shouldHideActions || renderActions ? null : actions !== undefined ? (
                       actions
                     ) : (

ui/component/claimPreviewTile/view.jsx

@@ -93,6 +93,7 @@ function ClaimPreviewTile(props: Props) {
   const thumbnailUrl = useGetThumbnail(uri, claim, streamingUrl, getFile, placeholder) || thumbnail;
   const canonicalUrl = claim && claim.canonical_url;
   const permanentUrl = claim && claim.permanent_url;
+  const repostedContentUri = claim && (claim.reposted_claim ? claim.reposted_claim.permanent_url : claim.permanent_url);
   const listId = collectionId || collectionClaimId;
   const navigateUrl =
     formatLbryUrlForWeb(canonicalUrl || uri || '/') + (listId ? generateListSearchUrlParams(listId) : '');
@@ -188,7 +189,7 @@ function ClaimPreviewTile(props: Props) {
           {!isChannel && (
             <React.Fragment>
               <div className="claim-preview__hover-actions">
-                {isPlayable && <FileWatchLaterLink focusable={false} uri={uri} />}
+                {isPlayable && <FileWatchLaterLink focusable={false} uri={repostedContentUri} />}
               </div>
               {/* @if TARGET='app' */}
               <div className="claim-preview__hover-actions">

ui/component/collectionActions/view.jsx

@@ -22,6 +22,8 @@ type Props = {
   collectionId: string,
   showInfo: boolean,
   setShowInfo: (boolean) => void,
+  showEdit: boolean,
+  setShowEdit: (boolean) => void,
   collectionHasEdits: boolean,
   isBuiltin: boolean,
   doToggleShuffleList: (string, boolean) => void,
@@ -44,6 +46,8 @@ function CollectionActions(props: Props) {
     doToggleShuffleList,
     playNextUri,
     firstItem,
+    showEdit,
+    setShowEdit,
   } = props;
   const [doShuffle, setDoShuffle] = React.useState(false);
   const { push } = useHistory();
@@ -147,7 +151,9 @@ function CollectionActions(props: Props) {
     </>
   );
 
-  const infoButton = (
+  const infoButtons = (
+    <div className="section">
+      {uri && (
         <Button
           title={__('Info')}
           className={classnames('button-toggle', {
@@ -156,6 +162,17 @@ function CollectionActions(props: Props) {
           icon={ICONS.MORE}
           onClick={() => setShowInfo(!showInfo)}
         />
+      )}
+
+      {isMyCollection && (
+        <Button
+          title={__('Edit')}
+          className={classnames('button-toggle', { 'button-toggle--active': showEdit })}
+          icon={ICONS.EDIT}
+          onClick={() => setShowEdit(!showEdit)}
+        />
+      )}
+    </div>
   );
 
   if (isMobile) {
@@ -163,7 +180,7 @@ function CollectionActions(props: Props) {
       <div className="media__actions">
         {lhsSection}
         {rhsSection}
-        {uri && <span>{infoButton}</span>}
+        {infoButtons}
       </div>
     );
   } else {
@@ -173,7 +190,8 @@ function CollectionActions(props: Props) {
           {lhsSection}
           {rhsSection}
         </div>
-        {uri && <>{infoButton}</>}
+
+        {infoButtons}
       </div>
     );
   }

ui/component/collectionContentSidebar/index.js

@@ -1,13 +1,15 @@
 import { connect } from 'react-redux';
 import CollectionContent from './view';
-import { selectClaimForUri, selectClaimIsMine } from 'redux/selectors/claims';
+import { selectClaimForUri } from 'redux/selectors/claims';
 import {
   makeSelectUrlsForCollectionId,
   makeSelectNameForCollectionId,
   makeSelectCollectionForId,
+  makeSelectCollectionIsMine,
 } from 'redux/selectors/collections';
 import { selectPlayingUri, selectListLoop, selectListShuffle } from 'redux/selectors/content';
 import { doToggleLoopList, doToggleShuffleList } from 'redux/actions/content';
+import { doCollectionEdit } from 'redux/actions/collections';
 
 const select = (state, props) => {
   const playingUri = selectPlayingUri(state);
@@ -24,7 +26,7 @@ const select = (state, props) => {
     collection: makeSelectCollectionForId(props.id)(state),
     collectionUrls: makeSelectUrlsForCollectionId(props.id)(state),
     collectionName: makeSelectNameForCollectionId(props.id)(state),
-    isMine: selectClaimIsMine(state, claim),
+    isMyCollection: makeSelectCollectionIsMine(props.id)(state),
     loop,
     shuffle,
   };
@@ -33,4 +35,5 @@ const select = (state, props) => {
 export default connect(select, {
   doToggleLoopList,
   doToggleShuffleList,
+  doCollectionEdit,
 })(CollectionContent);

ui/component/collectionContentSidebar/view.jsx

@@ -1,5 +1,10 @@
 // @flow
+
+// $FlowFixMe
+import { DragDropContext, Droppable } from 'react-beautiful-dnd';
+
 import React from 'react';
+import classnames from 'classnames';
 import ClaimList from 'component/claimList';
 import Card from 'component/common/card';
 import Button from 'component/button';
@@ -11,7 +16,7 @@ import * as ICONS from 'constants/icons';
 type Props = {
   id: string,
   url: string,
-  isMine: boolean,
+  isMyCollection: boolean,
   collectionUrls: Array<Claim>,
   collectionName: string,
   collection: any,
@@ -20,10 +25,35 @@ type Props = {
   doToggleLoopList: (string, boolean) => void,
   doToggleShuffleList: (string, string, boolean) => void,
   createUnpublishedCollection: (string, Array<any>, ?string) => void,
+  doCollectionEdit: (string, CollectionEditParams) => void,
 };
 
 export default function CollectionContent(props: Props) {
-  const { collectionUrls, collectionName, id, url, loop, shuffle, doToggleLoopList, doToggleShuffleList } = props;
+  const {
+    isMyCollection,
+    collectionUrls,
+    collectionName,
+    id,
+    url,
+    loop,
+    shuffle,
+    doToggleLoopList,
+    doToggleShuffleList,
+    doCollectionEdit,
+  } = props;
+
+  const [showEdit, setShowEdit] = React.useState(false);
+
+  function handleOnDragEnd(result) {
+    const { source, destination } = result;
+
+    if (!destination) return;
+
+    const { index: from } = source;
+    const { index: to } = destination;
+
+    doCollectionEdit(id, { order: { from, to } });
+  }
 
   return (
     <Card
@@ -63,12 +93,26 @@ export default function CollectionContent(props: Props) {
         </>
       }
       titleActions={
+        <>
           <div className="card__title-actions--link">
             {/* TODO: BUTTON TO SAVE COLLECTION - Probably save/copy modal */}
             <Button label={__('View List')} button="link" navigate={`/$/${PAGES.LIST}/${id}`} />
           </div>
+
+          {isMyCollection && (
+            <Button
+              title={__('Edit')}
+              className={classnames('button-toggle', { 'button-toggle--active': showEdit })}
+              icon={ICONS.EDIT}
+              onClick={() => setShowEdit(!showEdit)}
+            />
+          )}
+        </>
       }
       body={
+        <DragDropContext onDragEnd={handleOnDragEnd}>
+          <Droppable droppableId="list__ordering">
+            {(DroppableProvided) => (
               <ClaimList
                 isCardBody
                 type="small"
@@ -76,7 +120,12 @@ export default function CollectionContent(props: Props) {
                 uris={collectionUrls}
                 collectionId={id}
                 empty={__('List is Empty')}
+                showEdit={showEdit}
+                droppableProvided={DroppableProvided}
               />
+            )}
+          </Droppable>
+        </DragDropContext>
       }
     />
   );

ui/component/collectionEdit/index.js

@@ -22,6 +22,7 @@ import * as ACTIONS from 'constants/action_types';
 import CollectionForm from './view';
 import { selectActiveChannelClaim, selectIncognito } from 'redux/selectors/app';
 import { doSetActiveChannel, doSetIncognito } from 'redux/actions/app';
+import { doCollectionEdit } from 'redux/actions/collections';
 
 const select = (state, props) => ({
   claim: makeSelectClaimForUri(props.uri)(state),
@@ -44,12 +45,13 @@ const select = (state, props) => ({
   collectionClaimIds: makeSelectClaimIdsForCollectionId(props.collectionId)(state),
 });
 
-const perform = (dispatch) => ({
+const perform = (dispatch, ownProps) => ({
   publishCollectionUpdate: (params) => dispatch(doCollectionPublishUpdate(params)),
   publishCollection: (params, collectionId) => dispatch(doCollectionPublish(params, collectionId)),
   clearCollectionErrors: () => dispatch({ type: ACTIONS.CLEAR_COLLECTION_ERRORS }),
   setActiveChannel: (claimId) => dispatch(doSetActiveChannel(claimId)),
   setIncognito: (incognito) => dispatch(doSetIncognito(incognito)),
+  doCollectionEdit: (params) => dispatch(doCollectionEdit(ownProps.collectionId, params)),
 });
 
 export default connect(select, perform)(CollectionForm);

ui/component/collectionEdit/view.jsx

@@ -1,4 +1,8 @@
 // @flow
+
+// $FlowFixMe
+import { DragDropContext, Droppable } from 'react-beautiful-dnd';
+
 import { DOMAIN } from 'config';
 import React from 'react';
 import classnames from 'classnames';
@@ -55,6 +59,7 @@ type Props = {
   onDone: (string) => void,
   setActiveChannel: (string) => void,
   setIncognito: (boolean) => void,
+  doCollectionEdit: (CollectionEditParams) => void,
 };
 
 function CollectionForm(props: Props) {
@@ -88,6 +93,7 @@ function CollectionForm(props: Props) {
     setActiveChannel,
     setIncognito,
     onDone,
+    doCollectionEdit,
   } = props;
   const activeChannelName = activeChannelClaim && activeChannelClaim.name;
   let prefix = IS_WEB ? `${DOMAIN}/` : 'lbry://';
@@ -197,6 +203,17 @@ function CollectionForm(props: Props) {
     return collectionParams;
   }
 
+  function handleOnDragEnd(result) {
+    const { source, destination } = result;
+
+    if (!destination) return;
+
+    const { index: from } = source;
+    const { index: to } = destination;
+
+    doCollectionEdit({ order: { from, to } });
+  }
+
   function handleLanguageChange(index, code) {
     let langs = [...languageParam];
     if (index === 0) {
@@ -287,7 +304,6 @@ function CollectionForm(props: Props) {
     }
   }, [uri, hasClaim]);
 
-  console.log('params', params);
   return (
     <>
       <div className={classnames('main--contained', { 'card--disabled': disabled })}>
@@ -358,7 +374,19 @@ function CollectionForm(props: Props) {
               </div>
             </TabPanel>
             <TabPanel>
-              <ClaimList uris={collectionUrls} collectionId={collectionId} empty={__('This list has no items.')} />
+              <DragDropContext onDragEnd={handleOnDragEnd}>
+                <Droppable droppableId="list__ordering">
+                  {(DroppableProvided) => (
+                    <ClaimList
+                      uris={collectionUrls}
+                      collectionId={collectionId}
+                      empty={__('This list has no items.')}
+                      showEdit
+                      droppableProvided={DroppableProvided}
+                    />
+                  )}
+                </Droppable>
+              </DragDropContext>
             </TabPanel>
             <TabPanel>
               <Card

ui/component/collectionEditButtons/index.js

@@ -0,0 +1,23 @@
+import { connect } from 'react-redux';
+import { doCollectionEdit } from 'redux/actions/collections';
+import { makeSelectIndexForUrlInCollection, makeSelectUrlsForCollectionId } from 'redux/selectors/collections';
+import CollectionButtons from './view';
+
+const select = (state, props) => {
+  const { uri, collectionId } = props;
+
+  return {
+    collectionIndex: makeSelectIndexForUrlInCollection(uri, collectionId, true)(state),
+    collectionUris: makeSelectUrlsForCollectionId(collectionId)(state),
+  };
+};
+
+const perform = (dispatch, ownProps) => {
+  const { collectionId } = ownProps;
+
+  return {
+    editCollection: (params) => dispatch(doCollectionEdit(collectionId, params)),
+  };
+};
+
+export default connect(select, perform)(CollectionButtons);

ui/component/collectionEditButtons/view.jsx

@@ -0,0 +1,92 @@
+// @flow
+import * as ICONS from 'constants/icons';
+import Button from 'component/button';
+import Icon from 'component/common/icon';
+import React from 'react';
+
+type Props = {
+  collectionIndex?: number,
+  collectionUris: Array<Collection>,
+  dragHandleProps?: any,
+  uri: string,
+  editCollection: (CollectionEditParams) => void,
+};
+
+export default function CollectionButtons(props: Props) {
+  const { collectionIndex: foundIndex, collectionUris, dragHandleProps, uri, editCollection } = props;
+
+  const [confirmDelete, setConfirmDelete] = React.useState(false);
+
+  const lastCollectionIndex = collectionUris ? collectionUris.length - 1 : 0;
+  const collectionIndex = Number(foundIndex);
+
+  const orderButton = (className: string, title: string, icon: string, disabled: boolean, handleClick?: () => void) => (
+    <Button
+      className={`button-collection-manage ${className}`}
+      icon={icon}
+      title={title}
+      disabled={disabled}
+      onClick={() => handleClick && handleClick()}
+    />
+  );
+
+  return (
+    <div
+      className="collection-preview__edit-buttons"
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}
+    >
+      <div className="collection-preview__edit-group" {...dragHandleProps}>
+        <div className="button-collection-manage button-collection-drag top-left bottom-left">
+          <Icon icon={ICONS.DRAG} title={__('Drag')} size={20} />
+        </div>
+      </div>
+
+      <div className="collection-preview__edit-group">
+        {orderButton('', __('Move Top'), ICONS.UP_TOP, collectionIndex === 0, () =>
+          editCollection({ order: { from: collectionIndex, to: 0 } })
+        )}
+
+        {orderButton('', __('Move Bottom'), ICONS.DOWN_BOTTOM, collectionIndex === lastCollectionIndex, () =>
+          editCollection({ order: { from: collectionIndex, to: lastCollectionIndex } })
+        )}
+      </div>
+
+      <div className="collection-preview__edit-group">
+        {orderButton('', __('Move Up'), ICONS.UP, collectionIndex === 0, () =>
+          editCollection({ order: { from: collectionIndex, to: collectionIndex - 1 } })
+        )}
+
+        {orderButton('', __('Move Down'), ICONS.DOWN, collectionIndex === lastCollectionIndex, () =>
+          editCollection({ order: { from: collectionIndex, to: collectionIndex + 1 } })
+        )}
+      </div>
+
+      {!confirmDelete ? (
+        <div className="collection-preview__edit-group collection-preview__delete ">
+          <Button
+            className="button-collection-manage button-collection-delete top-right bottom-right"
+            icon={ICONS.DELETE}
+            title={__('Remove')}
+            onClick={() => setConfirmDelete(true)}
+          />
+        </div>
+      ) : (
+        <div className="collection-preview__edit-group collection-preview__delete">
+          <Button
+            className="button-collection-manage button-collection-delete-cancel top-right"
+            icon={ICONS.REMOVE}
+            title={__('Cancel')}
+            onClick={() => setConfirmDelete(false)}
+          />
+
+          {orderButton('button-collection-delete-confirm bottom-right', __('Remove'), ICONS.DELETE, false, () =>
+            editCollection({ uris: [uri], remove: true })
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

ui/component/collectionSelectItem/index.js

@@ -5,10 +5,12 @@ import { doCollectionEdit } from 'redux/actions/collections';
 import CollectionSelectItem from './view';
 
 const select = (state, props) => {
+  const { collectionId, uri } = props;
+
   return {
-    collection: makeSelectCollectionForId(props.collectionId)(state),
+    collection: makeSelectCollectionForId(collectionId)(state),
-    hasClaim: makeSelectCollectionForIdHasClaimUrl(props.collectionId, props.uri)(state),
+    hasClaim: makeSelectCollectionForIdHasClaimUrl(collectionId, uri)(state),
-    collectionPending: makeSelectClaimIsPending(props.collectionId)(state),
+    collectionPending: makeSelectClaimIsPending(collectionId)(state),
   };
 };
 

ui/component/collectionSelectItem/view.jsx

@@ -11,15 +11,15 @@ type Props = {
   category: string,
   edited: boolean,
   editCollection: (string, CollectionEditParams) => void,
-  claim: Claim,
+  uri: string,
   collectionPending: Collection,
 };
 
 function CollectionSelectItem(props: Props) {
-  const { collection, hasClaim, category, editCollection, claim, collectionPending } = props;
+  const { collection, hasClaim, category, editCollection, uri, collectionPending } = props;
   const { name, id } = collection;
   const handleChange = (e) => {
-    editCollection(id, { claims: [claim], remove: hasClaim });
+    editCollection(id, { uris: [uri], remove: hasClaim });
   };
 
   let icon;

ui/component/common/icon-custom.jsx

@@ -534,6 +534,9 @@ export const icons = {
     <path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" />
   ),
   [ICONS.UP]: buildIcon(<polyline transform="matrix(1,0,0,-1,0,24.707107)" points="6 9 12 15 18 9" />),
+  [ICONS.UP_TOP]: buildIcon(<path d="m6 16 6-6 6 6M6 8h12" />),
+  [ICONS.DOWN_BOTTOM]: buildIcon(<path d="m6 8 6 6 6-6M6 16h12" />),
+  [ICONS.DRAG]: buildIcon(<path d="m8 18 4 4 4-4M4 14h16M4 10h16M8 6l4-4 4 4" />),
   [ICONS.DOWN]: buildIcon(<polyline points="6 9 12 15 18 9" />),
   [ICONS.FULLSCREEN]: buildIcon(
     <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />

ui/component/fileWatchLaterLink/index.js

@@ -1,18 +1,15 @@
 import { connect } from 'react-redux';
 import { doCollectionEdit } from 'redux/actions/collections';
 import { makeSelectCollectionForIdHasClaimUrl } from 'redux/selectors/collections';
-import { makeSelectClaimForUri } from 'redux/selectors/claims';
 import * as COLLECTIONS_CONSTS from 'constants/collections';
 import FileWatchLaterLink from './view';
 import { doToast } from 'redux/actions/notifications';
 
 const select = (state, props) => {
-  const claim = makeSelectClaimForUri(props.uri)(state);
+  const { uri } = props;
-  const permanentUri = claim && claim.permanent_url;
 
   return {
-    claim,
+    hasClaimInWatchLater: makeSelectCollectionForIdHasClaimUrl(COLLECTIONS_CONSTS.WATCH_LATER_ID, uri)(state),
-    hasClaimInWatchLater: makeSelectCollectionForIdHasClaimUrl(COLLECTIONS_CONSTS.WATCH_LATER_ID, permanentUri)(state),
   };
 };
 

ui/component/fileWatchLaterLink/view.jsx

@@ -7,7 +7,6 @@ import * as COLLECTIONS_CONSTS from 'constants/collections';
 
 type Props = {
   uri: string,
-  claim: StreamClaim,
   focusable: boolean,
   hasClaimInWatchLater: boolean,
   doToast: ({ message: string }) => void,
@@ -15,14 +14,10 @@ type Props = {
 };
 
 function FileWatchLaterLink(props: Props) {
-  const { claim, hasClaimInWatchLater, doToast, doCollectionEdit, focusable = true } = props;
+  const { uri, hasClaimInWatchLater, doToast, doCollectionEdit, focusable = true } = props;
   const buttonRef = useRef();
   let isHovering = useHover(buttonRef);
 
-  if (!claim) {
-    return null;
-  }
-
   function handleWatchLater(e) {
     e.preventDefault();
     doToast({
@@ -31,7 +26,7 @@ function FileWatchLaterLink(props: Props) {
       linkTarget: !hasClaimInWatchLater && '/list/watchlater',
     });
     doCollectionEdit(COLLECTIONS_CONSTS.WATCH_LATER_ID, {
-      claims: [claim],
+      uris: [uri],
       remove: hasClaimInWatchLater,
       type: 'playlist',
     });

ui/constants/icons.js

@@ -65,7 +65,10 @@ export const OPTIONS = 'Sliders';
 export const YES = 'ThumbsUp';
 export const NO = 'ThumbsDown';
 export const UP = 'ChevronUp';
+export const UP_TOP = 'ChevronUpTop';
 export const DOWN = 'ChevronDown';
+export const DOWN_BOTTOM = 'ChevronDownBottom';
+export const DRAG = 'DragAndDrop';
 export const SECURE = 'Lock';
 export const MENU = 'Menu';
 export const BACKUP = 'Database';

ui/page/collection/view.jsx

@@ -1,4 +1,8 @@
 // @flow
+
+// $FlowFixMe
+import { DragDropContext, Droppable } from 'react-beautiful-dnd';
+
 import React from 'react';
 import ClaimList from 'component/claimList';
 import Page from 'component/page';
@@ -51,6 +55,7 @@ export default function CollectionPage(props: Props) {
     collectionHasEdits,
     claimIsPending,
     isResolvingCollection,
+    editCollection,
     fetchCollectionItems,
     deleteCollection,
   } = props;
@@ -62,9 +67,23 @@ export default function CollectionPage(props: Props) {
 
   const [didTryResolve, setDidTryResolve] = React.useState(false);
   const [showInfo, setShowInfo] = React.useState(false);
+  const [showEdit, setShowEdit] = React.useState(false);
+  const [unavailableUris, setUnavailable] = React.useState([]);
+
   const { name, totalItems } = collection || {};
   const isBuiltin = COLLECTIONS_CONSTS.BUILTIN_LISTS.includes(collectionId);
 
+  function handleOnDragEnd(result) {
+    const { source, destination } = result;
+
+    if (!destination) return;
+
+    const { index: from } = source;
+    const { index: to } = destination;
+
+    editCollection(collectionId, { order: { from, to } });
+  }
+
   const urlParams = new URLSearchParams(search);
   const editing = urlParams.get(PAGE_VIEW_QUERY) === EDIT_PAGE;
 
@@ -93,6 +112,18 @@ export default function CollectionPage(props: Props) {
     />
   );
 
+  const removeUnavailable = (
+    <Button
+      button="close"
+      icon={ICONS.DELETE}
+      label={__('Remove all unavailable claims')}
+      onClick={() => {
+        editCollection(collectionId, { uris: unavailableUris, remove: true });
+        setUnavailable([]);
+      }}
+    />
+  );
+
   let titleActions;
   if (collectionHasEdits) {
     titleActions = unpublished;
@@ -123,7 +154,7 @@ export default function CollectionPage(props: Props) {
           {claim ? claim.value.title || claim.name : collection && collection.name}
         </span>
       }
-      titleActions={titleActions}
+      titleActions={unavailableUris.length > 0 ? removeUnavailable : titleActions}
       subtitle={subTitle}
       body={
         <CollectionActions
@@ -133,6 +164,8 @@ export default function CollectionPage(props: Props) {
           showInfo={showInfo}
           isBuiltin={isBuiltin}
           collectionUrls={collectionUrls}
+          setShowEdit={setShowEdit}
+          showEdit={showEdit}
         />
       }
       actions={
@@ -188,7 +221,20 @@ export default function CollectionPage(props: Props) {
       <Page>
         <div className={classnames('section card-stack')}>
           {info}
-          <ClaimList uris={collectionUrls} collectionId={collectionId} />
+
+          <DragDropContext onDragEnd={handleOnDragEnd}>
+            <Droppable droppableId="list__ordering">
+              {(DroppableProvided) => (
+                <ClaimList
+                  uris={collectionUrls}
+                  collectionId={collectionId}
+                  showEdit={showEdit}
+                  droppableProvided={DroppableProvided}
+                  unavailableUris={unavailableUris}
+                />
+              )}
+            </Droppable>
+          </DragDropContext>
         </div>
       </Page>
     );

ui/redux/actions/collections.js

@@ -319,160 +319,49 @@ export const doCollectionEdit = (collectionId: string, params: CollectionEditPar
 ) => {
   const state = getState();
   const collection: Collection = makeSelectCollectionForId(collectionId)(state);
+
+  if (!collection) return dispatch({ type: ACTIONS.COLLECTION_ERROR, data: { message: 'collection does not exist' } });
+
   const editedCollection: Collection = makeSelectEditedCollectionForId(collectionId)(state);
   const unpublishedCollection: Collection = makeSelectUnpublishedCollectionForId(collectionId)(state);
   const publishedCollection: Collection = makeSelectPublishedCollectionForId(collectionId)(state); // needs to be published only
 
-  const generateCollectionItemsFromSearchResult = (results) => {
+  const { uris, order, remove, type } = params;
-    return (
-      Object.values(results)
-        // $FlowFixMe
-        .reduce(
-          (
-            acc,
-            cur: {
-              stream: ?StreamClaim,
-              channel: ?ChannelClaim,
-              claimsInChannel: ?number,
-              collection: ?CollectionClaim,
-            }
-          ) => {
-            let url;
-            if (cur.stream) {
-              url = cur.stream.permanent_url;
-            } else if (cur.channel) {
-              url = cur.channel.permanent_url;
-            } else if (cur.collection) {
-              url = cur.collection.permanent_url;
-            } else {
-              return acc;
-            }
-            acc.push(url);
-            return acc;
-          },
-          []
-        )
-    );
-  };
-
-  if (!collection) {
-    return dispatch({
-      type: ACTIONS.COLLECTION_ERROR,
-      data: {
-        message: 'collection does not exist',
-      },
-    });
-  }
-
-  let currentItems = collection.items ? collection.items.concat() : [];
-  const { claims: passedClaims, order, claimIds, replace, remove, type } = params;
 
   const collectionType = type || collection.type;
-  let newItems: Array<?string> = currentItems;
+  const currentUrls = collection.items ? collection.items.concat() : [];
+  let newItems = currentUrls;
 
-  if (passedClaims) {
+  // Passed uris to add/remove:
+  if (uris) {
     if (remove) {
-      const passedUrls = passedClaims.map((claim) => claim.permanent_url);
+      // Filters (removes) the passed uris from the current list items
-      // $FlowFixMe // need this?
+      newItems = currentUrls.filter((url) => url && !uris.includes(url));
-      newItems = currentItems.filter((item: string) => !passedUrls.includes(item));
     } else {
-      passedClaims.forEach((claim) => newItems.push(claim.permanent_url));
+      // Pushes (adds to the end) the passed uris to the current list items
-    }
+      uris.forEach((url) => newItems.push(url));
-  }
-
-  if (claimIds) {
-    const batches = [];
-    if (claimIds.length > 50) {
-      for (let i = 0; i < Math.ceil(claimIds.length / 50); i++) {
-        batches[i] = claimIds.slice(i * 50, (i + 1) * 50);
-      }
-    } else {
-      batches[0] = claimIds;
-    }
-    const resultArray = await Promise.all(
-      batches.map((batch) => {
-        let options = { claim_ids: batch, page: 1, page_size: 50 };
-        return dispatch(doClaimSearch(options));
-      })
-    );
-
-    const searchResults = Object.assign({}, ...resultArray);
-
-    if (replace) {
-      newItems = generateCollectionItemsFromSearchResult(searchResults);
-    } else {
-      newItems = currentItems.concat(generateCollectionItemsFromSearchResult(searchResults));
     }
   }
 
+  // Passed an ordering to change: (doesn't need the uris here since
+  // the items are already on the list)
   if (order) {
-    const [movedItem] = currentItems.splice(order.from, 1);
+    const [movedItem] = currentUrls.splice(order.from, 1);
-    currentItems.splice(order.to, 0, movedItem);
+    currentUrls.splice(order.to, 0, movedItem);
   }
 
-  // console.log('p&e', publishedCollection.items, newItems, publishedCollection.items.join(','), newItems.join(','))
+  // Delete 'edited' if newItems are the same as publishedItems
-  if (editedCollection) {
+  if (editedCollection && newItems && publishedCollection.items.join(',') === newItems.join(',')) {
-    // delete edited if newItems are the same as publishedItems
+    dispatch({ type: ACTIONS.COLLECTION_DELETE, data: { id: collectionId, collectionKey: 'edited' } });
-    if (publishedCollection.items.join(',') === newItems.join(',')) {
-      dispatch({
-        type: ACTIONS.COLLECTION_DELETE,
-        data: {
-          id: collectionId,
-          collectionKey: 'edited',
-        },
-      });
   } else {
     dispatch({
       type: ACTIONS.COLLECTION_EDIT,
       data: {
         id: collectionId,
-          collectionKey: 'edited',
+        collectionKey:
-          collection: {
+          ((editedCollection || publishedCollection) && 'edited') ||
-            items: newItems,
+          (COLS.BUILTIN_LISTS.includes(collectionId) && 'builtin') ||
-            id: collectionId,
+          (unpublishedCollection && 'unpublished'),
-            name: params.name || collection.name,
-            updatedAt: getTimestamp(),
-            type: collectionType,
-          },
-        },
-      });
-    }
-  } else if (publishedCollection) {
-    dispatch({
-      type: ACTIONS.COLLECTION_EDIT,
-      data: {
-        id: collectionId,
-        collectionKey: 'edited',
-        collection: {
-          items: newItems,
-          id: collectionId,
-          name: params.name || collection.name,
-          updatedAt: getTimestamp(),
-          type: collectionType,
-        },
-      },
-    });
-  } else if (COLS.BUILTIN_LISTS.includes(collectionId)) {
-    dispatch({
-      type: ACTIONS.COLLECTION_EDIT,
-      data: {
-        id: collectionId,
-        collectionKey: 'builtin',
-        collection: {
-          items: newItems,
-          id: collectionId,
-          name: params.name || collection.name,
-          updatedAt: getTimestamp(),
-          type: collectionType,
-        },
-      },
-    });
-  } else if (unpublishedCollection) {
-    dispatch({
-      type: ACTIONS.COLLECTION_EDIT,
-      data: {
-        id: collectionId,
-        collectionKey: 'unpublished',
         collection: {
           items: newItems,
           id: collectionId,
@@ -483,5 +372,6 @@ export const doCollectionEdit = (collectionId: string, params: CollectionEditPar
       },
     });
   }
+
   return true;
 };

ui/redux/selectors/collections.js

@@ -154,13 +154,13 @@ export const makeSelectClaimIdsForCollectionId = (id: string) =>
     return ids;
   });
 
-export const makeSelectIndexForUrlInCollection = (url: string, id: string) =>
+export const makeSelectIndexForUrlInCollection = (url: string, id: string, ignoreShuffle?: boolean) =>
   createSelector(
     (state) => state.content.shuffleList,
     makeSelectUrlsForCollectionId(id),
     makeSelectClaimForUri(url),
     (shuffleState, urls, claim) => {
-      const shuffleUrls = shuffleState && shuffleState.collectionId === id && shuffleState.newUrls;
+      const shuffleUrls = !ignoreShuffle && shuffleState && shuffleState.collectionId === id && shuffleState.newUrls;
       const listUrls = shuffleUrls || urls;
 
       const index = listUrls && listUrls.findIndex((u) => u === url);

ui/scss/component/_button.scss

@@ -602,30 +602,65 @@ svg + .button__label {
   }
 }
 
-.button-collection-order {
+.button-collection-manage {
-  height: 100%;
   font-size: var(--font-base);
   border-left-width: 0;
-  border-radius: 0;
   margin: 0;
-  color: var(--color-text);
+  width: 100%;
   button {
-    padding: var(--spacing-xs);
+    padding: var(--spacing-xxs);
+  }
+
+  .button__content {
+    display: unset;
+  }
+  line-height: 1.2;
+  font-weight: var(--font-weight-bold);
+  height: 100%;
+  background-color: var(--color-button-alt-bg);
+  color: var(--color-button-alt-text);
+  text-align: center;
+
+  &:hover {
+    background-color: var(--color-button-alt-bg-hover);
   }
 
   @media (max-width: $breakpoint-small) {
-    padding: var(--spacing-s) var(--spacing-s);
+    font-size: var(--font-small);
+
+    &:focus {
+      background-color: var(--color-button-alt-bg);
+    }
   }
 
-  &:first-of-type {
+  &.top-right {
-    border-left-width: 1px;
+    border-top-right-radius: var(--border-radius);
+  }
+  &.top-left {
     border-top-left-radius: var(--border-radius);
+  }
+  &.bottom-right {
+    border-bottom-right-radius: var(--border-radius);
+  }
+  &.bottom-left {
     border-bottom-left-radius: var(--border-radius);
   }
 
-  &:last-of-type {
+  &.button-collection-delete-confirm {
-    border-top-right-radius: var(--border-radius);
+    background-color: green;
-    border-bottom-right-radius: var(--border-radius);
+  }
+
+  &.button-collection-delete-cancel {
+    background-color: red;
+  }
+
+  &.button-collection-drag {
+    cursor: grab;
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
+    padding-bottom: var(--spacing-xs);
   }
 }
 

ui/scss/component/_claim-list.scss

@@ -215,6 +215,15 @@
   }
 }
 
+.claim-preview--collection-mine {
+  padding-left: 9rem;
+  position: relative;
+
+  @media (max-width: $breakpoint-small) {
+    padding-left: 6.5rem;
+  }
+}
+
 .claim-preview--pending {
   opacity: 0.6;
 }

ui/scss/component/_collection.scss

@@ -86,21 +86,30 @@
 }
 
 .collection-preview__edit-buttons {
-  display: flex;
+  position: absolute;
-  flex-direction: row;
+  left: 0;
-  margin-top: var(--spacing-xs);
+  top: calc(-1 * var(--spacing-m));
-  margin-bottom: var(--spacing-xs);
+  bottom: calc(-1 * var(--spacing-m));
+  padding-left: 0;
+  padding-top: var(--spacing-m);
+  padding-bottom: var(--spacing-m);
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  align-items: center;
 }
 
 .collection-preview__edit-group {
-  &:not(:last-of-type) {
+  height: 100%;
-    margin-right: var(--spacing-s);
+  display: flex;
-  }
+  flex-direction: column;
-  margin-right: var(--spacing-s);
+  width: 2rem;
-  button {
+  align-items: center;
+  justify-content: center;
+  align-items: stretch;
+  flex-grow: 4;
+
   @media (max-width: $breakpoint-small) {
-      padding: var(--spacing-s) var(--spacing-s);
+    width: 1.5rem;
-    }
   }
 }
 

ui/scss/component/_main.scss

@@ -173,6 +173,21 @@
     flex-direction: column;
     overflow-wrap: break-word;
 
+    .card__header--between {
+      align-items: flex-start !important;
+
+      .card__title-actions {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        padding: var(--spacing-s);
+
+        button {
+          margin-top: var(--spacing-xxs);
+        }
+      }
+    }
+
     .file-page__recommended-collection__row {
       display: block;
 
@@ -184,6 +199,15 @@
         max-width: 50rem;
       }
     }
+
+    .collection-preview__edit-group {
+      width: 1.5rem;
+    }
+
+    .claim-preview--collection-mine {
+      padding-left: 6.5rem;
+      position: relative;
+    }
   }
 
   @media (max-width: $breakpoint-medium) {

yarn.lock

@@ -1188,6 +1188,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.15.4", "@babel/runtime@^7.9.2":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.7.tgz#03ff99f64106588c9c403c6ecb8c3bafbbdff1fa"
+  integrity sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.1", "@babel/template@^7.8.3", "@babel/template@^7.8.6":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.1.tgz#e167154a94cb5f14b28dc58f5356d2162f539811"
@@ -1935,6 +1942,14 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
+"@types/hoist-non-react-statics@^3.3.0":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/html-minifier-terser@^5.0.0":
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#3c9ee980f1a10d6021ae6632ca3e79ca2ec4fb50"
@@ -2000,6 +2015,16 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-redux@^7.1.20":
+  version "7.1.21"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.21.tgz#f32bbaf7cbc4b93f51e10d340aa54035c084b186"
+  integrity sha512-bLdglUiBSQNzWVVbmNPKGYYjrzp3/YDPwfOH3nLEz99I4awLlaRAPWjo6bZ2POpxztFWtDDXIPxBLVykXqBt+w==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.0"
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+    redux "^4.0.0"
+
 "@types/react-transition-group@^4.4.4":
   version "4.4.4"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e"
@@ -5365,6 +5390,13 @@ crypto-random-string@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
 
+css-box-model@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1"
+  integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==
+  dependencies:
+    tiny-invariant "^1.0.6"
+
 css-color-names@0.0.4, css-color-names@^0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
@@ -13551,6 +13583,11 @@ querystringify@^2.1.1:
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
   integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
 
+raf-schd@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a"
+  integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==
+
 randomatic@^3.0.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-3.1.1.tgz#b776efc59375984e36c537b2f51a1f0aff0da1ed"
@@ -13627,6 +13664,19 @@ react-awesome-lightbox@^1.7.3:
   resolved "https://registry.yarnpkg.com/react-awesome-lightbox/-/react-awesome-lightbox-1.7.3.tgz#ee1c00fd4197e0e65bf996aa219eac4d8b6db5a0"
   integrity sha512-mSxdL3KGzuh2eR8I00nv9njiolmMoXITuCvfd71DBXK13JW3e+Z/sCMENS9+dngBJU8/m7dR1Ix0W6afS5cFsA==
 
+react-beautiful-dnd@^13.1.0:
+  version "13.1.0"
+  resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz#ec97c81093593526454b0de69852ae433783844d"
+  integrity sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+    css-box-model "^1.2.0"
+    memoize-one "^5.1.1"
+    raf-schd "^4.0.2"
+    react-redux "^7.2.0"
+    redux "^4.0.4"
+    use-memo-one "^1.1.1"
+
 react-calendar@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/react-calendar/-/react-calendar-3.3.1.tgz#da691a5d59c88f178695fd8b33909a71d698021f"
@@ -13877,6 +13927,18 @@ react-redux@^6.0.1:
     prop-types "^15.7.2"
     react-is "^16.8.2"
 
+react-redux@^7.2.0:
+  version "7.2.6"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.6.tgz#49633a24fe552b5f9caf58feb8a138936ddfe9aa"
+  integrity sha512-10RPdsz0UUrRL1NZE0ejTkucnclYSgXp5q+tB5SWx2qeG2ZJQJyymgAhwKy73yiL/13btfB6fPr+rgbMAaZIAQ==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@types/react-redux" "^7.1.20"
+    hoist-non-react-statics "^3.3.2"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+
 react-router-dom@^5.1.0:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.1.2.tgz#06701b834352f44d37fbb6311f870f84c76b9c18"
@@ -14218,6 +14280,13 @@ redux@^3.6.0:
     loose-envify "^1.1.0"
     symbol-observable "^1.0.3"
 
+redux@^4.0.0, redux@^4.0.4:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.2.tgz#140f35426d99bb4729af760afcf79eaaac407104"
+  integrity sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
 regenerate-unicode-properties@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
@@ -16145,6 +16214,11 @@ tiny-invariant@^1.0.2:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
 
+tiny-invariant@^1.0.6:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9"
+  integrity sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg==
+
 tiny-relative-date@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/tiny-relative-date/-/tiny-relative-date-1.3.0.tgz#fa08aad501ed730f31cc043181d995c39a935e07"
@@ -16826,6 +16900,11 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-memo-one@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.2.tgz#0c8203a329f76e040047a35a1197defe342fab20"
+  integrity sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ==
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"