Merge branch 'feature_mark_as_read' of https://github.com/imhariprakash/hackertab.dev into imhariprakash-feature_mark_as_read2

Author: medyo

src/assets/App.css

@@ -51,6 +51,16 @@ a {
   align-items: center;
 }
 
+.readPostWrapper {
+  position: relative;
+}
+
+.readPostWrapper .subTitle::after {
+  content: ' \2705';
+  margin-left: 0.2em;
+  font-size: 0.85em;
+}
+
 .loadingIcon {
   color: var(--app-name-text-color);
 }
@@ -201,6 +211,7 @@ a {
   box-sizing: border-box;
   scroll-snap-align: start;
   width: 100%;
+  position: relative;
 }
 
 .blockContent {
@@ -467,7 +478,7 @@ a {
   padding: 0;
   pointer-events: all;
   text-align: center;
-  transition: opacity 0.3s ease, right 0.3s ease;
+  transition: opacity 0.3s ease, right 0.3s ease, transform 0.1s ease, background-color 0.15s ease, color 0.15s ease;
   width: 28px;
   margin-bottom: 6px;
   margin-right: 6px;
@@ -490,6 +501,59 @@ a {
   }
 }
 
+.markAsReadAction {
+  position: relative;
+}
+
+.markAsReadTooltip {
+  position: absolute;
+  bottom: 100%;
+  right: 5px;
+  margin-bottom: 6px;
+  padding: 4px 8px;
+  background-color: var(--card-action-button-background);
+  color: var(--card-action-button-color);
+  font-size: 12px;
+  white-space: nowrap;
+  border-radius: 4px;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.markAsReadAction:hover .markAsReadTooltip {
+  opacity: 1;
+}
+
+.centerMessageWrapper.cardLoading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.centerMessageIcon {
+  display: block;
+  font-size: 36px;
+  margin-bottom: 12px;
+}
+
+.centerMessage p {
+  margin: 0;
+  color: var(--primary-text-color);
+}
+
+.centerMessage p:first-of-type {
+  font-size: 16px;
+  line-height: 24px;
+  margin-bottom: 6px;
+}
+
+.centerMessageSubtext {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
 /* Card (element) */
 .blockRow {
   padding: 8px 16px;

src/components/Elements/CardWithActions/CardItemWithActions.tsx

@@ -1,9 +1,10 @@
 import React, { useCallback, useEffect, useState } from 'react'
-import { BiBookmarkMinus, BiBookmarkPlus, BiShareAlt } from 'react-icons/bi'
+import { BiBookmarkMinus, BiBookmarkPlus, BiCheckCircle, BiShareAlt } from 'react-icons/bi'
 import { ShareModal } from 'src/features/shareModal'
 import { ShareModalData } from 'src/features/shareModal/types'
 import { Attributes, trackLinkBookmark, trackLinkUnBookmark } from 'src/lib/analytics'
 import { useBookmarks } from 'src/stores/bookmarks'
+import { useReadPosts } from 'src/stores/readPosts'
 
 type CardItemWithActionsProps = {
   item: {
@@ -32,10 +33,20 @@ export const CardItemWithActions = ({
   const [shareModalData, setShareModalData] = useState<ShareModalData>()
 
   const { bookmarkPost, unbookmarkPost, userBookmarks } = useBookmarks()
+  const { readPostIds, markAsRead, markAsUnread } = useReadPosts()
+  const isRead = readPostIds.includes(item.id)
   const [isBookmarked, setIsBookmarked] = useState(
     userBookmarks.some((bm) => bm.source === source && bm.url === item.url)
   )
 
+  const onMarkAsReadClick = useCallback(() => {
+    if (isRead) {
+      markAsUnread(item.id)
+    } else {
+      markAsRead(item.id)
+    }
+  }, [isRead, markAsRead, markAsUnread, item.id])
+
   const onBookmarkClick = useCallback(() => {
     const itemToBookmark = {
       title: item.title,
@@ -100,6 +111,16 @@ export const CardItemWithActions = ({
             {!isBookmarked ? <BiBookmarkPlus /> : <BiBookmarkMinus />}
           </button>
         )}
+
+        <span className="markAsReadAction">
+          <span className="markAsReadTooltip">{isRead ? 'Mark as unread' : 'Mark as read'}</span>
+          <button
+            className="blockActionButton"
+            onClick={onMarkAsReadClick}
+            aria-label={isRead ? 'Mark as unread' : 'Mark as read'}>
+            <BiCheckCircle />
+          </button>
+        </span>
       </div>
     </div>
   )

src/components/List/ListComponent.tsx

@@ -1,6 +1,8 @@
 import React, { memo, ReactNode, useMemo } from 'react'
 import { Placeholder } from 'src/components/placeholders'
 import { MAX_ITEMS_PER_CARD } from 'src/config'
+import { useUserPreferences } from 'src/stores/preferences'
+import { useReadPosts } from 'src/stores/readPosts'
 
 type PlaceholdersProps = {
   placeholder: ReactNode
@@ -42,13 +44,23 @@ export function ListComponent<T extends any>(props: ListComponentPropsType<T>) {
     limit = MAX_ITEMS_PER_CARD,
   } = props
 
+  const { readPostIds } = useReadPosts()
+  const { showReadPosts } = useUserPreferences()
+
+  const filteredItems = useMemo(() => {
+    if (!items || items.length === 0) return []
+    if (showReadPosts) return items
+    const readSet = new Set(readPostIds)
+    return items.filter((item: any) => !readSet.has(item.id))
+  }, [items, readPostIds, showReadPosts])
+
   const sortedData = useMemo(() => {
-    if (!items || items.length == 0) return []
-    if (!sortBy) return items
+    if (!filteredItems || filteredItems.length == 0) return []
+    if (!sortBy) return filteredItems
 
     const result = sortFn
-      ? [...items].sort(sortFn)
-      : [...items].sort((a, b) => {
+      ? [...filteredItems].sort(sortFn)
+      : [...filteredItems].sort((a, b) => {
           const aVal = a[sortBy]
           const bVal = b[sortBy]
           if (typeof aVal === 'number' && typeof bVal === 'number') return bVal - aVal
@@ -57,7 +69,9 @@ export function ListComponent<T extends any>(props: ListComponentPropsType<T>) {
         })
 
     return result
-  }, [sortBy, sortFn, items])
+  }, [sortBy, sortFn, filteredItems])
+
+  const readSet = useMemo(() => new Set(readPostIds), [readPostIds])
 
   const enrichedItems = useMemo(() => {
     if (!sortedData || sortedData.length === 0) {
@@ -66,7 +80,15 @@ export function ListComponent<T extends any>(props: ListComponentPropsType<T>) {
 
     try {
       return sortedData.slice(0, limit).map((item, index) => {
-        let content: ReactNode[] = [renderItem(item, index)]
+        const isRead = readSet.has((item as any).id)
+        const itemNode = isRead ? (
+          <div key={(item as any).id} className="readPostWrapper" aria-label="Read">
+            {renderItem(item, index)}
+          </div>
+        ) : (
+          renderItem(item, index)
+        )
+        let content: ReactNode[] = [itemNode]
         if (header && index === 0) {
           content.unshift(header)
         }
@@ -76,7 +98,7 @@ export function ListComponent<T extends any>(props: ListComponentPropsType<T>) {
     } catch (e) {
       return []
     }
-  }, [sortedData, header, renderItem, limit])
+  }, [sortedData, header, renderItem, limit, readSet])
 
   if (isLoading) {
     return <Placeholders placeholder={placeholder} />
@@ -93,5 +115,17 @@ export function ListComponent<T extends any>(props: ListComponentPropsType<T>) {
     )
   }
 
+  if (items && items.length > 0 && filteredItems.length === 0) {
+    return (
+      <div className="centerMessageWrapper cardLoading">
+        <div className="centerMessage errorMsg">
+          <span className="centerMessageIcon">✨</span>
+          <p><b>You're all caught up!</b></p>
+          <p className="centerMessageSubtext">Check back later for fresh content.</p>
+        </div>
+      </div>
+    )
+  }
+
   return <>{enrichedItems}</>
 }

src/features/settings/components/GeneralSettings/GeneralSettings.tsx

@@ -25,10 +25,12 @@ export const GeneralSettings = () => {
     listingMode,
     theme,
     maxVisibleCards,
+    showReadPosts,
     setTheme,
     setListingMode,
     setMaxVisibleCards,
     setOpenLinksNewTab,
+    setShowReadPosts,
   } = useUserPreferences()
 
   const onOpenLinksNewTabChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -52,6 +54,10 @@ export const GeneralSettings = () => {
     identifyUserTheme(newTheme)
   }
 
+  const onShowReadPostsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setShowReadPosts(e.target.checked)
+  }
+
   return (
     <SettingsContentLayout
       title="General Settings"
@@ -88,6 +94,17 @@ export const GeneralSettings = () => {
           </div>
         </div>
 
+        <div className="settingRow">
+          <p className="settingTitle">Display read posts</p>
+          <div className="settingContent">
+            <Toggle
+              checked={showReadPosts}
+              icons={false}
+              onChange={onShowReadPostsChange}
+            />
+          </div>
+        </div>
+
         <DNDSettings />
 
         <DeleteAccount />

src/stores/preferences.ts

@@ -36,6 +36,7 @@ export type UserPreferencesState = {
   userCustomCards: SupportedCardType[]
   advStatus: boolean
   DNDDuration: DNDDuration
+  showReadPosts: boolean
 }
 
 type UserPreferencesStoreActions = {
@@ -61,6 +62,7 @@ type UserPreferencesStoreActions = {
   addSearchEngine: (searchEngine: SearchEngineType) => void
   removeSearchEngine: (searchEngineUrl: string) => void
   setAdvStatus: (status: boolean) => void
+  setShowReadPosts: (value: boolean) => void
 }
 
 export const useUserPreferences = create(
@@ -92,6 +94,7 @@ export const useUserPreferences = create(
       userCustomCards: [],
       DNDDuration: 'never',
       advStatus: false,
+      showReadPosts: false,
       setLayout: (layout) => set({ layout }),
       setPromptEngine: (promptEngine: string) => set({ promptEngine }),
       setListingMode: (listingMode: ListingMode) => set({ listingMode }),
@@ -166,6 +169,7 @@ export const useUserPreferences = create(
           }
         }),
       setAdvStatus: (status) => set({ advStatus: status }),
+      setShowReadPosts: (value) => set({ showReadPosts: value }),
       removeCard: (cardName: string) =>
         set((state) => {
           return {

src/stores/readPosts.ts

@@ -0,0 +1,36 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+const MAX_READ_POST_IDS = 5000
+
+type ReadPostsStore = {
+  readPostIds: string[]
+  markAsRead: (postId: string) => void
+  markAsUnread: (postId: string) => void
+}
+
+export const useReadPosts = create<ReadPostsStore>()(
+  persist(
+    (set) => ({
+      readPostIds: [],
+
+      markAsRead: (postId) =>
+        set((state) => {
+          if (state.readPostIds.includes(postId)) return state
+
+          const next =
+            state.readPostIds.length >= MAX_READ_POST_IDS
+              ? [...state.readPostIds.slice(1), postId]
+              : [...state.readPostIds, postId]
+
+          return { readPostIds: next }
+        }),
+
+      markAsUnread: (postId) =>
+        set((state) => ({
+          readPostIds: state.readPostIds.filter((id) => id !== postId),
+        })),
+    }),
+    { name: 'read_post_ids' }
+  )
+)