omnivore/packages/web/components/patterns/LibraryCards/LibraryHoverActions.tsx

import { useState } from 'react'
import { Box, SpanBox } from '../../elements/LayoutPrimitives'
import { LibraryItemNode } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
import { LinkedItemCardAction } from './CardTypes'
import { Button } from '../../elements/Button'
import { theme } from '../../tokens/stitches.config'
import { DotsThree, Share } from 'phosphor-react'
import { CardMenu } from '../CardMenu'
import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
import { ArchiveIcon } from '../../elements/icons/ArchiveIcon'
import { NotebookIcon } from '../../elements/icons/NotebookIcon'
import { TrashIcon } from '../../elements/icons/TrashIcon'
import { LabelIcon } from '../../elements/icons/LabelIcon'
import { UnarchiveIcon } from '../../elements/icons/UnarchiveIcon'
import { BrowserIcon } from '../../elements/icons/BrowserIcon'

type LibraryHoverActionsProps = {
  viewer: UserBasicData

  isHovered: boolean

  item: LibraryItemNode
  handleAction: (action: LinkedItemCardAction) => void
}

export const LibraryHoverActions = (props: LibraryHoverActionsProps) => {
  const [menuOpen, setMenuOpen] = useState(false)

  return (
    <Box
      css={{
        overflow: 'clip',

        height: '33px',
        width: '200px',
        bg: '$thBackground',
        display: 'flex',

        pt: '0px',
        alignItems: 'center',
        justifyContent: 'center',
        border: '1px solid $thBackground5',
        borderRadius: '5px',

        gap: '5px',
        px: '5px',
        visibility: props.isHovered || menuOpen ? 'visible' : 'hidden',
        '&:hover': {
          boxShadow:
            '0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);',
        },
      }}
      onClick={(event) => {
        event.stopPropagation()
      }}
    >
      <Button
        title="View notebook (t)"
        style="hoverActionIcon"
        onClick={(event) => {
          props.handleAction('open-notebook')
          event.preventDefault()
          event.stopPropagation()
        }}
        css={{
          visibility: props.isHovered || menuOpen ? 'visible' : 'hidden',
        }}
      >
        <NotebookIcon
          size={21}
          color={theme.colors.thNotebookSubtle.toString()}
        />
      </Button>
      <Button
        title={props.item.isArchived ? 'Unarchive (e)' : 'Archive (e)'}
        style="hoverActionIcon"
        onClick={(event) => {
          const action = props.item.isArchived ? 'unarchive' : 'archive'
          props.handleAction(action)
          event.preventDefault()
          event.stopPropagation()
        }}
      >
        {props.item.isArchived ? (
          <UnarchiveIcon
            size={21}
            color={theme.colors.thNotebookSubtle.toString()}
          />
        ) : (
          <ArchiveIcon
            size={21}
            color={theme.colors.thNotebookSubtle.toString()}
          />
        )}
      </Button>
      <Button
        title="Remove (#)"
        style="hoverActionIcon"
        onClick={(event) => {
          props.handleAction('delete')
          event.preventDefault()
          event.stopPropagation()
        }}
      >
        <TrashIcon size={21} color={theme.colors.thNotebookSubtle.toString()} />
      </Button>
      <Button
        title="Edit labels (l)"
        style="hoverActionIcon"
        onClick={(event) => {
          props.handleAction('set-labels')
          event.preventDefault()
          event.stopPropagation()
        }}
      >
        <LabelIcon size={21} color={theme.colors.thNotebookSubtle.toString()} />
      </Button>
      <Button
        title="Open original (o)"
        style="hoverActionIcon"
        onClick={(event) => {
          props.handleAction('showOriginal')
          event.preventDefault()
          event.stopPropagation()
        }}
      >
        <BrowserIcon
          size={21}
          color={theme.colors.thNotebookSubtle.toString()}
        />
      </Button>
      <CardMenu
        item={props.item}
        viewer={props.viewer}
        onOpenChange={(open) => setMenuOpen(open)}
        actionHandler={props.handleAction}
        triggerElement={
          <SpanBox
            css={{
              display: 'flex',
              pt: '2.5px',
              height: '33px',
              '&:hover': {
                bg: '$grayBgHover',
              },
            }}
          >
            <DotsThree
              size={25}
              weight="bold"
              color={theme.colors.thNotebookSubtle.toString()}
            />
          </SpanBox>
        }
      />
    </Box>
  )
}