Added download icon to Claim Previews

ui/component/claimPreview/view.jsx

@@ -18,6 +18,7 @@ import useGetThumbnail from 'effects/use-get-thumbnail';
 import ClaimPreviewTitle from 'component/claimPreviewTitle';
 import ClaimPreviewSubtitle from 'component/claimPreviewSubtitle';
 import ClaimRepostAuthor from 'component/claimRepostAuthor';
+import FileDownloadLink from 'component/fileDownloadLink';
 
 type Props = {
   uri: string,
@@ -236,7 +237,13 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
           </UriIndicator>
         ) : (
           <NavLink {...navLinkProps}>
-            <FileThumbnail thumbnail={thumbnailUrl} />
+            <FileThumbnail thumbnail={thumbnailUrl}>
+              {/* @if TARGET='app' */}
+              <div className="claim-preview__hover-actions">
+                <FileDownloadLink uri={uri} hideOpenButton hideDownloadStatus />
+              </div>
+              {/* @endif */}
+            </FileThumbnail>
           </NavLink>
         )}
 

ui/component/fileDownloadLink/view.jsx

@@ -19,6 +19,7 @@ type Props = {
   triggerViewEvent: string => void,
   costInfo: ?{ cost: string },
   hideOpenButton: boolean,
+  hideDownloadStatus: boolean,
 };
 
 function FileDownloadLink(props: Props) {
@@ -35,6 +36,7 @@ function FileDownloadLink(props: Props) {
     triggerViewEvent,
     costInfo,
     hideOpenButton = false,
+    hideDownloadStatus = false,
   } = props;
 
   const [viewEventSent, setViewEventSent] = useState(false);
@@ -67,7 +69,7 @@ function FileDownloadLink(props: Props) {
     const label =
       fileInfo && fileInfo.written_bytes > 0 ? progress.toFixed(0) + __('% downloaded') : __('Connecting...');
 
-    return <span className="download-text">{label}</span>;
+    return hideDownloadStatus ? null : <span className="download-text">{label}</span>;
   }
 
   if (fileInfo && fileInfo.download_path && fileInfo.completed) {

ui/scss/component/_claim-list.scss

@@ -93,6 +93,26 @@
     margin-right: var(--spacing-medium);
   }
 
+  .claim-preview__hover-actions {
+    display: none;
+    position: absolute;
+    top: var(--spacing-miniscule);
+    right: var(--spacing-miniscule);
+
+    & > * {
+      color: var(--color-black);
+      background-color: var(--color-white);
+      padding: var(--spacing-xsmall);
+      border-radius: var(--border-radius);
+    }
+  }
+
+  &:hover {
+    .claim-preview__hover-actions {
+      display: block;
+    }
+  }
+
   @media (max-width: $breakpoint-small) {
     font-size: 14px;