list editing behind toggle button

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();
@@ -158,6 +162,17 @@ function CollectionActions(props: Props) {
     />
   );
 
+  const showEditButton = (
+    <Button
+      title={__('Edit')}
+      className={classnames('button-toggle', {
+        'button-toggle--active': showEdit,
+      })}
+      icon={ICONS.EDIT}
+      onClick={() => setShowEdit(!showEdit)}
+    />
+  );
+
   if (isMobile) {
     return (
       <div className="media__actions">
@@ -173,7 +188,12 @@ function CollectionActions(props: Props) {
           {lhsSection}
           {rhsSection}
         </div>
-        {uri && <>{infoButton}</>}
+        {uri && (
+          <div className="section">
+            {infoButton}
+            {showEditButton}
+          </div>
+        )}
       </div>
     );
   }

ui/page/collection/view.jsx

@@ -62,6 +62,7 @@ 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 { name, totalItems } = collection || {};
   const isBuiltin = COLLECTIONS_CONSTS.BUILTIN_LISTS.includes(collectionId);
 
@@ -133,6 +134,8 @@ export default function CollectionPage(props: Props) {
           showInfo={showInfo}
           isBuiltin={isBuiltin}
           collectionUrls={collectionUrls}
+          setShowEdit={setShowEdit}
+          showEdit={showEdit}
         />
       }
       actions={
@@ -188,7 +191,8 @@ export default function CollectionPage(props: Props) {
       <Page>
         <div className={classnames('section card-stack')}>
           {info}
-          <ClaimList uris={collectionUrls} collectionId={collectionId} type={'listview'} />
+          {showEdit && <div>Do the sort</div>}
+          <ClaimList uris={collectionUrls} collectionId={collectionId} type={showEdit ? 'listview' : undefined} />
         </div>
       </Page>
     );