wip

src/ui/component/common/credit-amount.jsx

@@ -10,7 +10,6 @@ type Props = {
   showFullPrice: boolean,
   showPlus: boolean,
   isEstimate?: boolean,
-  large?: boolean,
   showLBC?: boolean,
   fee?: boolean,
   badge?: boolean,
@@ -69,7 +68,6 @@ class CreditAmount extends React.PureComponent<Props> {
           badge,
           'badge--cost': badge && amount > 0,
           'badge--free': badge && isFree,
-          'badge--large': large,
         })}
       >
         {amountText}

src/ui/component/fileList/view.jsx

@@ -50,7 +50,7 @@ export default function FileList(props: Props) {
           {sortedUris.map((uri, index) => (
             <React.Fragment key={uri}>
               <FileListItem uri={uri} />
-              {index === 4 && injectedItem && <div className="file-list__item--injected">{injectedItem}</div>}
+              {index === 4 && injectedItem && <li className="file-list__item--injected">{injectedItem}</li>}
             </React.Fragment>
           ))}
         </ul>

src/ui/component/fileListItem/view.jsx

@@ -10,6 +10,7 @@ import UriIndicator from 'component/uriIndicator';
 import TruncatedText from 'component/common/truncated-text';
 import DateTime from 'component/dateTime';
 import FileProperties from 'component/fileProperties';
+import FileTags from 'component/fileTags';
 
 type Props = {
   uri: string,
@@ -84,19 +85,22 @@ function FileListItem(props: Props) {
       })}
     >
       <CardMedia thumbnail={thumbnail} />
-
-      <div className="file-list__item-info">
-        <div className="file-list__item-title">
-          <TruncatedText text={title} lines={2} />
-        </div>
-        <div className="media__subtitle">
-          {pending ? <div>Pending...</div> : <UriIndicator uri={uri} link />}
-          <div>{isChannel ? `${claimsInChannel} ${__('publishes')}` : <DateTime timeAgo uri={uri} />}</div>
+      <div className="file-list__item-metadata">
+        <div className="file-list__item-info">
+          <div className="file-list__item-title">
+            <TruncatedText text={title} lines={2} />
+          </div>
+          <FileProperties uri={uri} />
         </div>
-      </div>
 
-      <div className="file-list__item-properties">
-        <FileProperties uri={uri} />
+        <div className="file-list__item-properties">
+          <div className="media__subtitle">
+            {pending ? <div>Pending...</div> : <UriIndicator uri={uri} link />}
+            <div>{isChannel ? `${claimsInChannel} ${__('publishes')}` : <DateTime timeAgo uri={uri} />}</div>
+          </div>
+
+          <FileTags uri={uri} />
+        </div>
       </div>
     </li>
   );

src/ui/component/fileProperties/index.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { makeSelectFileInfoForUri, makeSelectClaimIsMine, makeSelectTagsForUri } from 'lbry-redux';
+import { makeSelectFileInfoForUri, makeSelectClaimIsMine } from 'lbry-redux';
 import { selectRewardContentClaimIds } from 'lbryinc';
 import { makeSelectIsSubscribed, makeSelectIsNew } from 'redux/selectors/subscriptions';
 import FileProperties from './view';
@@ -10,7 +10,6 @@ const select = (state, props) => ({
   isSubscribed: makeSelectIsSubscribed(props.uri)(state),
   isNew: makeSelectIsNew(props.uri)(state),
   claimIsMine: makeSelectClaimIsMine(props.uri)(state),
-  tags: makeSelectTagsForUri(props.uri)(state),
 });
 
 export default connect(

src/ui/component/fileProperties/view.jsx

@@ -12,32 +12,20 @@ type Props = {
   isSubscribed: boolean,
   isNew: boolean,
   rewardedContentClaimIds: Array<string>,
-  tags: Array<string>,
 };
 
-function FileProperties(props: Props) {
-  const { uri, downloaded, claimIsMine, rewardedContentClaimIds, isSubscribed, isNew, tags } = props;
+export default function FileProperties(props: Props) {
+  const { uri, downloaded, claimIsMine, rewardedContentClaimIds, isSubscribed, isNew } = props;
   const { claimId } = parseURI(uri);
   const isRewardContent = rewardedContentClaimIds.includes(claimId);
 
   return (
-    <React.Fragment>
-      <div className="file-properties">
-        {isSubscribed && <Icon icon={icons.SUBSCRIPTION} />}
-        {!claimIsMine && downloaded && <Icon icon={icons.DOWNLOAD} />}
-        {isRewardContent && <Icon iconColor="red" icon={icons.FEATURED} />}
-        {isNew && <span className="badge badge--alert">{__('NEW')}</span>}
-        <FilePrice hideFree uri={uri} />
-      </div>
-      <div className="file-properties">
-        {tags.slice(0, 3).map(tag => (
-          <span key={tag} className="badge badge--tag">
-            {tag}
-          </span>
-        ))}
-      </div>
-    </React.Fragment>
+    <div className="file-properties">
+      {isSubscribed && <Icon icon={icons.SUBSCRIPTION} />}
+      {!claimIsMine && downloaded && <Icon icon={icons.DOWNLOAD} />}
+      {isRewardContent && <Icon iconColor="red" icon={icons.FEATURED} />}
+      {isNew && <span className="badge badge--alert">{__('NEW')}</span>}
+      <FilePrice hideFree uri={uri} />
+    </div>
   );
 }
-
-export default FileProperties;

src/ui/component/fileTags/index.js

@@ -0,0 +1,13 @@
+import { connect } from 'react-redux';
+import { makeSelectTagsForUri, selectFollowedTags } from 'lbry-redux';
+import FileTags from './view';
+
+const select = (state, props) => ({
+  tags: makeSelectTagsForUri(props.uri)(state),
+  followedTags: selectFollowedTags(state),
+});
+
+export default connect(
+  select,
+  null
+)(FileTags);

src/ui/component/fileTags/view.jsx

@@ -0,0 +1,34 @@
+// @flow
+import * as icons from 'constants/icons';
+import * as React from 'react';
+import { parseURI } from 'lbry-redux';
+import Icon from 'component/common/icon';
+import FilePrice from 'component/filePrice';
+
+type Props = {
+  tags: Array<string>,
+  followedTags: Array<Tag>,
+};
+
+export default function FileTags(props: Props) {
+  const { tags, followedTags } = props;
+  let tagsToDisplay = [];
+  followedTags.forEach(({ name }) => {
+    if (tags.includes(name)) {
+      tagsToDisplay.push(name);
+    }
+  });
+
+  let sortedTags = tags.sort((a, b) => (a > b ? 1 : -1));
+  tagsToDisplay = tagsToDisplay.concat(sortedTags.slice(0, 3 - tagsToDisplay.length));
+
+  return (
+    <div className="file-properties">
+      {tagsToDisplay.map(tag => (
+        <span key={tag} className="tag">
+          {tag}
+        </span>
+      ))}
+    </div>
+  );
+}

src/ui/component/tags/view.jsx

@@ -9,11 +9,12 @@ const TAG_HEIGHT = 20;
 
 type Props = {
   tags: Array<Tag>,
+  followedTags: Array<Tag>,
   className?: string,
 };
 
 export default function Tags(props: Props) {
-  const { tags, className } = props;
+  const { tags, followedTags, className } = props;
 
   let listHeight = 0;
   function getYValues(data) {
@@ -41,7 +42,7 @@ export default function Tags(props: Props) {
       {transitions.map(({ item: tag, props: { y, ...rest }, key }) => (
         <animated.li
           key={key}
-          className="badge--tag"
+          className="tag"
           style={{ transform: y.interpolate(y => `translate3d(0,${y / 2}px,0)`), ...rest }}
         >
           {tag.name}

src/ui/component/tagsDragAndDrop/view.jsx

@@ -1,23 +1,21 @@
-import React from 'react';
+// @flow
+import React, { Fragment } from 'react';
 import classnames from 'classnames';
 import { animated, useTransition } from 'react-spring';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import reorderArray from 'util/reorder-array';
 
-export default function TagsDragAndDrop(props) {
-  const { tags, onDragEnd, onDelete } = props;
+type Props = {};
+
+export default function TagsDragAndDrop(props: Props) {
+  const { tags, onDragEnd, onDelete, subtitle } = props;
   const transitions = useTransition(tags, item => item.name, {
     from: { opacity: 0 },
     enter: { opacity: 1 },
   });
 
   function handleDragEnd(result) {
-    // dropped outside the list
-    if (!result.destination) {
-      return;
-    }
-
-    if (result.source.droppableId === 'delete') {
+    if (result.destination.droppableId === 'delete') {
       onDelete(result.source.index);
     } else {
       let newTags = reorderArray(tags, result.source.index, result.destination.index);
@@ -31,36 +29,46 @@ export default function TagsDragAndDrop(props) {
     <DragDropContext onDragEnd={handleDragEnd}>
       <Droppable droppableId="droppable" direction="horizontal">
         {(provided, snapshot) => (
-          <div className="tags--selected" ref={provided.innerRef} {...provided.droppableProps}>
-            {transitions.map(({ item, props, key }, index) => (
-              <animated.div key={key} style={props}>
-                <Draggable draggableId={item.name} index={index}>
-                  {(provided, snapshot) => (
-                    <span
-                      className={classnames('tag', 'tag--selected')}
-                      ref={provided.innerRef}
-                      {...provided.draggableProps}
-                      {...provided.dragHandleProps}
-                      style={provided.draggableProps.style}
-                    >
-                      {item.name}
-                    </span>
-                  )}
-                </Draggable>
-              </animated.div>
-            ))}
-            {provided.placeholder}
-          </div>
+          <Fragment>
+            <Droppable droppableId="delete">
+              {(providedx, snapshotx) =>
+                console.log('x', snapshotx) || (
+                  <div
+                    className={classnames({
+                      tags__delete: snapshotx.isDraggingOver,
+                      card__subtitle: !snapshotx.isDraggingOver,
+                    })}
+                    ref={providedx.innerRef}
+                    {...providedx.droppableProps}
+                  >
+                    {snapshotx.isDraggingOver ? __('Drop to remove') : subtitle}
+                    {providedx.placeholder}
+                  </div>
+                )
+              }
+            </Droppable>
+            <div className="tags--selected" ref={provided.innerRef} {...provided.droppableProps}>
+              {transitions.map(({ item, props, key }, index) => (
+                <animated.div key={key} style={props}>
+                  <Draggable draggableId={item.name} index={index}>
+                    {(providedy, snapshot) => (
+                      <div
+                        className={classnames('tag--selected')}
+                        ref={providedy.innerRef}
+                        {...providedy.draggableProps}
+                        {...providedy.dragHandleProps}
+                        style={providedy.draggableProps.style}
+                      >
+                        {item.name}
+                      </div>
+                    )}
+                  </Draggable>
+                </animated.div>
+              ))}
+            </div>
+          </Fragment>
         )}
       </Droppable>
-      {/* <Droppable droppableId="delete">
-        {(provided, snapshot) => (
-          <div className="tags__delete" ref={provided.innerRef} {...provided.droppableProps}>
-            Delete Me
-            {provided.placeholder}
-          </div>
-        )}
-      </Droppable> */}
     </DragDropContext>
   );
 }

src/ui/component/tagsSearch/view.jsx

@@ -14,6 +14,8 @@ const unfollowedTagsAnimation = {
   leave: { opacity: 0, maxWidth: 0 },
 };
 
+type Props = {};
+
 export default function TagSelect(props: Props) {
   const { unfollowedTags, followedTags, doToggleTagFollow, doAddTag } = props;
   const [newTag, setNewTag] = useState('');
@@ -51,12 +53,15 @@ export default function TagSelect(props: Props) {
       </Form>
       <div className="tags">
         {suggestedTransitions.map(({ item, key, props }) => (
-          <animated.div style={props} key={key}>
-            <Button onClick={() => doToggleTagFollow(item.name)} className="tag">
-              {item.name}
-              <Icon className="tag__action-label" icon={ICONS.ADD} />
-            </Button>
-          </animated.div>
+          <animated.button
+            onClick={() => doToggleTagFollow(item.name)}
+            style={props}
+            key={key}
+            className="tag--inactive"
+          >
+            {item.name}
+            <Icon className="tag__action-label" icon={ICONS.ADD} />
+          </animated.button>
         ))}
         {!suggestedTransitions.length && <p className="empty tags__empty-message">No suggested tags</p>}
       </div>

src/ui/component/tagsSelect/view.jsx

@@ -27,10 +27,10 @@ export default function TagSelect(props: Props) {
         {__('Make This Your Own')}
         {showClose && !hasClosed && <Button button="close" icon={ICONS.CLOSE} onClick={handleClose} />}
       </h2>
-      <p className="card__subtitle">{__('You are already following a couple tags, try searching for a new one.')}</p>
 
       <div className="card__content">
         <TagsDragAndDrop
+          subtitle={__('You are already following a couple tags, try searching for a new one.')}
           tags={followedTags}
           onDelete={indexToDelete => {
             doDeleteTag(followedTags[indexToDelete].name);

src/ui/page/discover/view.jsx

@@ -48,7 +48,7 @@ function DiscoverPage(props) {
       <div className="card">
         <FileList
           uris={trending}
-          injectedItem={personalSort === 'me' && <TagsSelect showClose={true} />}
+          injectedItem={personalSort === 'me' && <TagsSelect />}
           sort={
             <React.Fragment>
               <FormField

src/ui/scss/component/_badge.scss

@@ -2,7 +2,7 @@
 
 .badge--tag {
   @extend .badge;
-  background-color: rgba($lbry-teal-5, 0.15);
+  background-color: rgba($lbry-teal-5, 0.075);
   color: darken($lbry-teal-5, 20%);
 }
 

src/ui/scss/component/_card.scss

@@ -4,6 +4,7 @@
   position: relative;
   border-radius: var(--card-radius);
   box-shadow: var(--card-box-shadow) $lbry-gray-1;
+  overflow: hidden;
 
   html[data-mode='dark'] & {
     background-color: rgba($lbry-white, 0.1);