Posts: restore "Tip unlock | Claim details" component (#6051)

* Add ICON.INFO - "i" within a circle.

Basically, an inverted ICON.ALERT.

* Posts: restore "Tip unlock | Claim details" component

## Issue
5882: tip unlock + claim id detials missing from markdown posts view

## Notes
The easiest solution would be to put `FileDescription` into posts, but I think that goes against the clean up of the Post layout, where the focus should be on the content. The faded style of the File Details section seems too distracting, plus we don't want the File Description anyway.

Fixed by:
- Make the existing "LBC amount" clickable to show credit details. An additional padlock will appear if the content is yours and you have tips to unlock.
- Add an "info" icon beside it to show file details.

These "link" buttons are usually lit, but I dimmed it in this case to make them stand out less. Again, focusing on Post content instead of buttons.

static/app-strings.json

@@ -1867,6 +1867,7 @@
   "Help LBRY Save Crypto": "Help LBRY Save Crypto",
   "The US government is attempting to destroy the cryptocurrency industry. Can you help?": "The US government is attempting to destroy the cryptocurrency industry. Can you help?",
   "Learn more and sign petition": "Learn more and sign petition",
+  "View claim details": "View claim details",
   "Publishing...": "Publishing...",
   "Collection": "Collection",
   "Fetch transaction data for export": "Fetch transaction data for export",

ui/component/common/icon-custom.jsx

@@ -385,6 +385,13 @@ export const icons = {
       <line x1="12" y1="16" x2="12" y2="16" />
     </g>
   ),
+  [ICONS.INFO]: buildIcon(
+    <g>
+      <circle cx="12" cy="12" r="10" />
+      <line x1="12" y1="8" x2="12" y2="8" />
+      <line x1="12" y1="12" x2="12" y2="16" />
+    </g>
+  ),
   [ICONS.UNLOCK]: buildIcon(
     <g>
       <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />

ui/component/postViewer/index.js

@@ -1,9 +1,13 @@
 import { connect } from 'react-redux';
-import { makeSelectClaimForUri } from 'lbry-redux';
+import { makeSelectClaimForUri, makeSelectClaimIsMine } from 'lbry-redux';
 import PostViewer from './view';
+import { doOpenModal } from 'redux/actions/app';
 
 const select = (state, props) => ({
   claim: makeSelectClaimForUri(props.uri)(state),
+  claimIsMine: makeSelectClaimIsMine(props.uri)(state),
 });
 
-export default connect(select)(PostViewer);
+export default connect(select, {
+  doOpenModal,
+})(PostViewer);

ui/component/postViewer/view.jsx

@@ -1,27 +1,54 @@
 // @flow
 import * as React from 'react';
+import * as ICONS from 'constants/icons';
+import * as MODALS from 'constants/modal_types';
+import { formatCredits } from 'lbry-redux';
 import FileAuthor from 'component/fileAuthor';
+import FileDetails from 'component/fileDetails';
 import FileTitle from 'component/fileTitle';
 import FileActions from 'component/fileActions';
 import FileRenderInitiator from 'component/fileRenderInitiator';
 import FileRenderInline from 'component/fileRenderInline';
+import FileValues from 'component/fileValues';
 import FileViewCount from 'component/fileViewCount';
-import CreditAmount from 'component/common/credit-amount';
+import ClaimTags from 'component/claimTags';
 import DateTime from 'component/dateTime';
+import Button from 'component/button';
+import LbcSymbol from 'component/common/lbc-symbol';
+import classnames from 'classnames';
+
+const EXPAND = {
+  NONE: 'none',
+  CREDIT_DETAILS: 'credit_details',
+  FILE_DETAILS: 'file_details',
+};
 
 type Props = {
   uri: string,
   claim: ?StreamClaim,
+  claimIsMine: boolean,
+  doOpenModal: (id: string, {}) => void,
 };
 
 function PostViewer(props: Props) {
-  const { uri, claim } = props;
+  const { uri, claim, claimIsMine, doOpenModal } = props;
+  const [expand, setExpand] = React.useState(EXPAND.NONE);
 
   if (!claim) {
     return null;
   }
 
   const amount = parseFloat(claim.amount) + parseFloat(claim.meta.support_amount);
+  const formattedAmount = formatCredits(amount, 2, true);
+  const hasSupport = claim && claim.meta && claim.meta.support_amount && Number(claim.meta.support_amount) > 0;
+
+  function handleExpand(newExpand) {
+    if (expand === newExpand) {
+      setExpand(EXPAND.NONE);
+    } else {
+      setExpand(newExpand);
+    }
+  }
 
   return (
     <div className="post">
@@ -30,11 +57,51 @@ function PostViewer(props: Props) {
           <DateTime uri={uri} show={DateTime.SHOW_DATE} />
         </span>
       </FileTitle>
-      <div className="post__info">
-        <CreditAmount amount={amount} />
+
+      <div
+        className={classnames('post__info', {
+          'post__info--expanded': expand !== EXPAND.NONE,
+        })}
+      >
+        <div className="post__info--grouped">
+          <Button
+            button="link"
+            className="dim"
+            icon={ICONS.INFO}
+            aria-label={__('View claim details')}
+            onClick={() => handleExpand(EXPAND.FILE_DETAILS)}
+          />
+          <Button button="link" className="dim" onClick={() => handleExpand(EXPAND.CREDIT_DETAILS)}>
+            <LbcSymbol postfix={expand === EXPAND.CREDIT_DETAILS ? __('Hide') : formattedAmount} />
+          </Button>
+          {claimIsMine && hasSupport && (
+            <Button
+              button="link"
+              className="expandable__button"
+              icon={ICONS.UNLOCK}
+              aria-label={__('Unlock tips')}
+              onClick={() => {
+                doOpenModal(MODALS.LIQUIDATE_SUPPORTS, { uri });
+              }}
+            />
+          )}
+        </div>
         <FileViewCount uri={uri} />
       </div>
 
+      {expand === EXPAND.CREDIT_DETAILS && (
+        <div className="section post__info--credit-details">
+          <FileValues uri={uri} />
+        </div>
+      )}
+
+      {expand === EXPAND.FILE_DETAILS && (
+        <div className="section post__info--credit-details">
+          <ClaimTags uri={uri} type="large" />
+          <FileDetails uri={uri} />
+        </div>
+      )}
+
       <FileAuthor uri={uri} />
 
       <FileRenderInitiator uri={uri} />

ui/constants/icons.js

@@ -6,6 +6,7 @@
 export const REWARDS = 'Award';
 export const LOCAL = 'Folder';
 export const ALERT = 'AlertCircle';
+export const INFO = 'InfoCircle';
 export const COPY = 'Clipboard';
 export const ARROW_LEFT = 'ChevronLeft';
 export const ARROW_RIGHT = 'ChevronRight';

ui/scss/component/_post.scss

@@ -70,6 +70,32 @@
   }
 }
 
+.post__info--expanded {
+  margin-bottom: var(--spacing-s);
+}
+
+.post__info--grouped {
+  .button--link {
+    margin-right: var(--spacing-s);
+  }
+
+  .dim {
+    color: var(--color-text-subtitle);
+    stroke: var(--color-text-subtitle);
+  }
+}
+
+.post__info--credit-details {
+  @include font-sans;
+  margin-top: var(--spacing-l);
+  margin-bottom: var(--spacing-l);
+  width: 75%;
+
+  .tag {
+    margin-top: 0;
+  }
+}
+
 .post__date {
   display: block;
   margin-top: var(--spacing-s);