From 08a4126f00e3b8cce0841371161c14665d6debeb Mon Sep 17 00:00:00 2001
From: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date: Sun, 14 Apr 2024 14:55:11 +0700
Subject: [PATCH] feat: bulk mark as read action

---
 .../elements/icons/MarkAsReadIcon.tsx         | 39 +++++++++++++++++++
 .../templates/homeFeed/HomeFeedContainer.tsx  |  4 ++
 .../homeFeed/MultiSelectControls.tsx          | 37 ++++++++++++++++++
 .../mutations/bulkActionMutation.ts           |  1 +
 4 files changed, 81 insertions(+)
 create mode 100644 packages/web/components/elements/icons/MarkAsReadIcon.tsx

diff --git a/packages/web/components/elements/icons/MarkAsReadIcon.tsx b/packages/web/components/elements/icons/MarkAsReadIcon.tsx
new file mode 100644
index 000000000..bb951b35d
--- /dev/null
+++ b/packages/web/components/elements/icons/MarkAsReadIcon.tsx
@@ -0,0 +1,39 @@
+/* eslint-disable functional/no-class */
+/* eslint-disable functional/no-this-expression */
+import { IconProps } from './IconProps'
+
+import React from 'react'
+
+export class MarkAsReadIcon extends React.Component<IconProps> {
+  render() {
+    const size = (this.props.size || 26).toString()
+    const color = (this.props.color || '#2A2A2A').toString()
+    // tick letters button
+    return (
+      <svg
+        width={size}
+        height={size}
+        viewBox={`0 0 26 26`}
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g>
+          <path
+            d="M13 1C6.925 1 2 5.925 2 12C2 18.075 6.925 23 13 23C19.075 23 24 18.075 24 12C24 5.925 19.075 1 13 1Z"
+            stroke={color}
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M9.75 13.5L11.5 15.25L16.25 10.5"
+            stroke={color}
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
+      </svg>
+    )
+  }
+}
diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index 2eb4bef6b..cc6014c41 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -761,6 +761,7 @@ export function HomeFeedContainer(): JSX.Element {
           )
           if (res) {
             let successMessage: string | undefined = undefined
+            console.log(action)
             switch (action) {
               case BulkAction.ARCHIVE:
                 successMessage = 'Link Archived'
@@ -771,6 +772,9 @@ export function HomeFeedContainer(): JSX.Element {
               case BulkAction.DELETE:
                 successMessage = 'Items deleted'
                 break
+              case BulkAction.MARK_AS_READ:
+                successMessage = 'Items marked as read'
+                break
             }
             if (successMessage) {
               showSuccessToast(successMessage, { position: 'bottom-right' })
diff --git a/packages/web/components/templates/homeFeed/MultiSelectControls.tsx b/packages/web/components/templates/homeFeed/MultiSelectControls.tsx
index 987889182..e1cbb2113 100644
--- a/packages/web/components/templates/homeFeed/MultiSelectControls.tsx
+++ b/packages/web/components/templates/homeFeed/MultiSelectControls.tsx
@@ -12,6 +12,7 @@ import { X } from 'phosphor-react'
 import { LibraryHeaderProps } from './LibraryHeader'
 import { HeaderCheckboxIcon } from '../../elements/icons/HeaderCheckboxIcon'
 import { Label } from '../../../lib/networking/fragments/labelFragment'
+import { MarkAsReadIcon } from '../../elements/icons/MarkAsReadIcon'
 
 export const MultiSelectControls = (props: LibraryHeaderProps): JSX.Element => {
   const [showConfirmDelete, setShowConfirmDelete] = useState(false)
@@ -114,6 +115,7 @@ export const MultiSelectControls = (props: LibraryHeaderProps): JSX.Element => {
           <ArchiveButton {...props} />
           <AddLabelsButton setShowLabelsModal={setShowLabelsModal} />
           <RemoveItemsButton setShowConfirmDelete={setShowConfirmDelete} />
+          <MarkAsReadButton {...props} />
           {showConfirmDelete && (
             <ConfirmationModal
               message={`You are about to delete ${props.numItemsSelected} items. All associated notes and highlights will be deleted.`}
@@ -204,6 +206,41 @@ export const ArchiveButton = (props: LibraryHeaderProps): JSX.Element => {
   )
 }
 
+export const MarkAsReadButton = (props: LibraryHeaderProps): JSX.Element => {
+  const [color, setColor] = useState<string>(
+    theme.colors.thTextContrast2.toString()
+  )
+  return (
+    <Button
+      title="Mark As Read"
+      css={{
+        p: '5px',
+        display: 'flex',
+        '&:hover': {
+          bg: '$ctaBlue',
+          borderRadius: '100px',
+          opacity: 1.0,
+        },
+      }}
+      onMouseEnter={(event) => {
+        setColor('white')
+        event.preventDefault()
+      }}
+      onMouseLeave={(event) => {
+        setColor(theme.colors.thTextContrast2.toString())
+        event.preventDefault()
+      }}
+      style="plainIcon"
+      onClick={(e) => {
+        props.performMultiSelectAction(BulkAction.MARK_AS_READ)
+        e.preventDefault()
+      }}
+    >
+      <MarkAsReadIcon size={20} color={color} />
+    </Button>
+  )
+}
+
 type AddLabelsButtonProps = {
   setShowLabelsModal: (set: boolean) => void
 }
diff --git a/packages/web/lib/networking/mutations/bulkActionMutation.ts b/packages/web/lib/networking/mutations/bulkActionMutation.ts
index 71d02a281..fd02e66c0 100644
--- a/packages/web/lib/networking/mutations/bulkActionMutation.ts
+++ b/packages/web/lib/networking/mutations/bulkActionMutation.ts
@@ -5,6 +5,7 @@ export enum BulkAction {
   ARCHIVE = 'ARCHIVE',
   DELETE = 'DELETE',
   ADD_LABELS = 'ADD_LABELS',
+  MARK_AS_READ = 'MARK_AS_READ',
 }
 
 type BulkActionResponseData = {