Show item details via context menu (#1325)

* Show item details via context

* Use zappers instead of upvotes

Co-authored-by: Keyan <34140557+huumn@users.noreply.github.com>

---------

Co-authored-by: Keyan <34140557+huumn@users.noreply.github.com>

api/typeDefs/item.js

@@ -146,6 +146,7 @@ export default gql`
     rel: String
     apiKey: Boolean
     invoice: Invoice
+    cost: Int!
   }
 
   input ItemForwardInput {

components/item-info.js

@@ -25,6 +25,7 @@ import UserPopover from './user-popover'
 import { useQrPayment } from './payment'
 import { useRetryCreateItem } from './use-item-submit'
 import { useToast } from './toast'
+import { useShowModal } from './modal'
 
 export default function ItemInfo ({
   item, full, commentsText = 'comments',
@@ -210,6 +211,7 @@ export default function ItemInfo ({
             <EditInfo />
             <ActionDropdown>
               <CopyLinkDropdownItem item={item} />
+              <InfoDropdownItem item={item} />
               {(item.parentId || item.text) && onQuoteReply &&
                 <Dropdown.Item onClick={onQuoteReply}>quote reply</Dropdown.Item>}
               {me && <BookmarkDropdownItem item={item} />}
@@ -269,3 +271,39 @@ export default function ItemInfo ({
     </div>
   )
 }
+
+function InfoDropdownItem ({ item }) {
+  const me = useMe()
+  const showModal = useShowModal()
+
+  const onClick = () => {
+    showModal((onClose) => {
+      return (
+        <div className={styles.details}>
+          <div>id</div>
+          <div>{item.id}</div>
+          <div>created at</div>
+          <div>{item.createdAt}</div>
+          <div>cost</div>
+          <div>{item.cost}</div>
+          <div>sats</div>
+          <div>{item.sats}</div>
+          {me && (
+            <>
+              <div>sats from me</div>
+              <div>{item.meSats}</div>
+            </>
+          )}
+          <div>zappers</div>
+          <div>{item.upvotes}</div>
+        </div>
+      )
+    })
+  }
+
+  return (
+    <Dropdown.Item onClick={onClick}>
+      details
+    </Dropdown.Item>
+  )
+}

components/item.module.css

@@ -154,6 +154,12 @@ a.link:visited {
     grid-template-columns: auto minmax(0, 1fr);
 }
 
+.details {
+    display: grid;
+    grid-template-columns: auto auto;
+    column-gap: 1rem;
+}
+
 /* .itemJob .hunk {
     align-self: center;
 }

fragments/items.js

@@ -65,6 +65,7 @@ export const ITEM_FIELDS = gql`
       actionState
       confirmedAt
     }
+    cost
   }`
 
 export const ITEM_FULL_FIELDS = gql`