garrettmills/commafeed
1
0
Fork 0
forked from Archives/Athou_commafeed
Code Pull Requests Activity

Working on indicator feature for new unread feeds

Browse Source
This commit is contained in:
Eshwar Tangirala
2025-05-18 00:03:28 -04:00
parent 3f2f6e83fa
commit 0199a36238
4 changed files with 277 additions and 309 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
commafeed-client/src/app/tree/slice.ts
View File

@@ -46,17 +46,23 @@ export const treeSlice = createSlice({
visitCategoryTree(action.payload, category => { visitCategoryTree(action.payload, category => {
category.feeds = category.feeds.map(feed => { category.feeds = category.feeds.map(feed => {
const storageKey = `feed-${feed.id}-unread` const storageKey = `feed-${feed.id}-unread`
const prevUnread = parseInt(localStorage.getItem(storageKey) || "0", 10) const existing = localStorage.getItem(storageKey)
const hasNewEntries = feed.unread > prevUnread const prevUnread = Number.parseInt(existing || "0", 10)
const isNewFeed = existing === null
const hasNewEntries = isNewFeed ? true : feed.unread > prevUnread
if (!isNewFeed) {
localStorage.setItem(storageKey, feed.unread.toString()) localStorage.setItem(storageKey, feed.unread.toString())
}
return { return {
...feed, ...feed,
hasNewEntries hasNewEntries,
} }
}) })
}) })
state.rootCategory = action.payload state.rootCategory = action.payload
}) })
builder.addCase(collapseTreeCategory.pending, (state, action) => { builder.addCase(collapseTreeCategory.pending, (state, action) => {

155
commafeed-client/src/components/sidebar/Tree.tsx
View File

@@ -1,6 +1,6 @@
import { Trans } from "@lingui/react/macro"; import { Trans } from "@lingui/react/macro"
import { Box, Stack } from "@mantine/core"; import { Box, Stack } from "@mantine/core"
import { Constants } from "app/constants"; import { Constants } from "app/constants"
import { import {
redirectToCategory, redirectToCategory,
redirectToCategoryDetails, redirectToCategoryDetails,
@@ -8,107 +8,94 @@ import {
redirectToFeedDetails, redirectToFeedDetails,
redirectToTag, redirectToTag,
redirectToTagDetails, redirectToTagDetails,
} from "app/redirect/thunks"; } from "app/redirect/thunks"
import { useAppDispatch, useAppSelector } from "app/store"; import { useAppDispatch, useAppSelector } from "app/store"
import { collapseTreeCategory } from "app/tree/thunks"; import { collapseTreeCategory } from "app/tree/thunks"
import type { Category, Subscription, TreeSubscription } from "app/types"; import type { Category, Subscription, TreeSubscription } from "app/types"
import { categoryUnreadCount, flattenCategoryTree } from "app/utils"; import { categoryUnreadCount, flattenCategoryTree } from "app/utils"
import { Loader } from "components/Loader"; import { Loader } from "components/Loader"
import { OnDesktop } from "components/responsive/OnDesktop"; import { OnDesktop } from "components/responsive/OnDesktop"
import React, { useEffect, useState } from "react"; import React from "react"
import { import { TbChevronDown, TbChevronRight, TbInbox, TbStar, TbTag } from "react-icons/tb"
TbChevronDown, import { TreeNode } from "./TreeNode"
TbChevronRight, import { TreeSearch } from "./TreeSearch"
TbInbox,
TbStar,
TbTag,
} from "react-icons/tb";
import { TreeNode } from "./TreeNode";
import { TreeSearch } from "./TreeSearch";
const allIcon = <TbInbox size={16} />; const allIcon = <TbInbox size={16} />
const starredIcon = <TbStar size={16} />; const starredIcon = <TbStar size={16} />
const tagIcon = <TbTag size={16} />; const tagIcon = <TbTag size={16} />
const expandedIcon = <TbChevronDown size={16} />; const expandedIcon = <TbChevronDown size={16} />
const collapsedIcon = <TbChevronRight size={16} />; const collapsedIcon = <TbChevronRight size={16} />
const errorThreshold = 9; const errorThreshold = 9
export function Tree() { export function Tree() {
const root = useAppSelector((state) => state.tree.rootCategory); const root = useAppSelector(state => state.tree.rootCategory)
const source = useAppSelector((state) => state.entries.source); const source = useAppSelector(state => state.entries.source)
const tags = useAppSelector((state) => state.user.tags); const tags = useAppSelector(state => state.user.tags)
const showRead = useAppSelector((state) => state.user.settings?.showRead); const showRead = useAppSelector(state => state.user.settings?.showRead)
const dispatch = useAppDispatch(); const dispatch = useAppDispatch()
const isFeedDisplayed = (feed: Subscription) => { const isFeedDisplayed = (feed: Subscription) => {
const isCurrentFeed = const isCurrentFeed = source.type === "feed" && source.id === String(feed.id)
source.type === "feed" && source.id === String(feed.id); return isCurrentFeed || feed.unread > 0 || showRead
return isCurrentFeed || feed.unread > 0 || showRead; }
};
const isCategoryDisplayed = (category: Category): boolean => { const isCategoryDisplayed = (category: Category): boolean => {
const isCurrentCategory = const isCurrentCategory = source.type === "category" && source.id === category.id
source.type === "category" && source.id === category.id;
return ( return (
isCurrentCategory || isCurrentCategory ||
showRead || showRead ||
category.children.some((c) => isCategoryDisplayed(c)) || category.children.some(c => isCategoryDisplayed(c)) ||
category.feeds.some((f) => isFeedDisplayed(f)) category.feeds.some(f => isFeedDisplayed(f))
); )
}; }
const feedClicked = (e: React.MouseEvent, id: string) => { const feedClicked = (e: React.MouseEvent, id: string) => {
if (e.detail === 2) { if (e.detail === 2) {
dispatch(redirectToFeedDetails(id)); dispatch(redirectToFeedDetails(id))
} else { } else {
dispatch(redirectToFeed(id)); dispatch(redirectToFeed(id))
}
} }
};
const categoryClicked = (e: React.MouseEvent, id: string) => { const categoryClicked = (e: React.MouseEvent, id: string) => {
if (e.detail === 2) { if (e.detail === 2) {
dispatch(redirectToCategoryDetails(id)); dispatch(redirectToCategoryDetails(id))
} else { } else {
dispatch(redirectToCategory(id)); dispatch(redirectToCategory(id))
}
} }
};
const categoryIconClicked = (e: React.MouseEvent, category: Category) => { const categoryIconClicked = (e: React.MouseEvent, category: Category) => {
e.stopPropagation(); e.stopPropagation()
dispatch( dispatch(
collapseTreeCategory({ collapseTreeCategory({
id: +category.id, id: +category.id,
collapse: category.expanded, collapse: category.expanded,
}) })
); )
}; }
const tagClicked = (e: React.MouseEvent, id: string) => { const tagClicked = (e: React.MouseEvent, id: string) => {
if (e.detail === 2) { if (e.detail === 2) {
dispatch(redirectToTagDetails(id)); dispatch(redirectToTagDetails(id))
} else { } else {
dispatch(redirectToTag(id)); dispatch(redirectToTag(id))
}
} }
};
console.log(root?.feeds.map(f => f.hasNewEntries));
const allCategoryNode = () => ( const allCategoryNode = () => (
<TreeNode <TreeNode
id={Constants.categories.all.id} id={Constants.categories.all.id}
type="category" type="category"
name={<Trans>All</Trans>} name={<Trans>All</Trans>}
icon={allIcon} icon={allIcon}
unread={categoryUnreadCount(root)} unread={categoryUnreadCount(root)}
selected={ selected={source.type === "category" && source.id === Constants.categories.all.id}
source.type === "category" && source.id === Constants.categories.all.id
}
expanded={false} expanded={false}
level={0} level={0}
hasError={false} hasError={false}
onClick={categoryClicked} onClick={categoryClicked}
/> />
); )
const starredCategoryNode = () => ( const starredCategoryNode = () => (
<TreeNode <TreeNode
id={Constants.categories.starred.id} id={Constants.categories.starred.id}
@@ -116,25 +103,18 @@ export function Tree() {
name={<Trans>Starred</Trans>} name={<Trans>Starred</Trans>}
icon={starredIcon} icon={starredIcon}
unread={0} unread={0}
selected={ selected={source.type === "category" && source.id === Constants.categories.starred.id}
source.type === "category" &&
source.id === Constants.categories.starred.id
}
expanded={false} expanded={false}
level={0} level={0}
hasError={false} hasError={false}
onClick={categoryClicked} onClick={categoryClicked}
/> />
); )
const categoryNode = (category: Category, level = 0) => { const categoryNode = (category: Category, level = 0) => {
if (!isCategoryDisplayed(category)) return null; if (!isCategoryDisplayed(category)) return null
const hasError = const hasError = !category.expanded && flattenCategoryTree(category).some(c => c.feeds.some(f => f.errorCount > errorThreshold))
!category.expanded &&
flattenCategoryTree(category).some((c) =>
c.feeds.some((f) => f.errorCount > errorThreshold)
);
return ( return (
<TreeNode <TreeNode
id={category.id} id={category.id}
@@ -147,14 +127,14 @@ export function Tree() {
level={level} level={level}
hasError={hasError} hasError={hasError}
onClick={categoryClicked} onClick={categoryClicked}
onIconClick={(e) => categoryIconClicked(e, category)} onIconClick={e => categoryIconClicked(e, category)}
key={category.id} key={category.id}
/> />
); )
}; }
const feedNode = (feed: TreeSubscription, level = 0) => { const feedNode = (feed: TreeSubscription, level = 0) => {
if (!isFeedDisplayed(feed)) return null; if (!isFeedDisplayed(feed)) return null
return ( return (
<TreeNode <TreeNode
@@ -170,8 +150,8 @@ export function Tree() {
key={feed.id} key={feed.id}
newMessages={feed.hasNewEntries} newMessages={feed.hasNewEntries}
/> />
); )
}; }
const tagNode = (tag: string) => ( const tagNode = (tag: string) => (
<TreeNode <TreeNode
@@ -186,19 +166,18 @@ export function Tree() {
onClick={tagClicked} onClick={tagClicked}
key={tag} key={tag}
/> />
); )
const recursiveCategoryNode = (category: Category, level = 0) => ( const recursiveCategoryNode = (category: Category, level = 0) => (
<React.Fragment key={`recursiveCategoryNode-${category.id}`}> <React.Fragment key={`recursiveCategoryNode-${category.id}`}>
{categoryNode(category, level)} {categoryNode(category, level)}
{category.expanded && {category.expanded && category.children.map(c => recursiveCategoryNode(c, level + 1))}
category.children.map((c) => recursiveCategoryNode(c, level + 1))} {category.expanded && category.feeds.map(f => feedNode(f, level + 1))}
{category.expanded && category.feeds.map((f) => feedNode(f, level + 1))}
</React.Fragment> </React.Fragment>
); )
if (!root) return <Loader />; if (!root) return <Loader />
const feeds = flattenCategoryTree(root).flatMap((c) => c.feeds); const feeds = flattenCategoryTree(root).flatMap(c => c.feeds)
return ( return (
<Stack> <Stack>
<OnDesktop> <OnDesktop>
@@ -207,10 +186,10 @@ export function Tree() {
<Box className="cf-tree"> <Box className="cf-tree">
{allCategoryNode()} {allCategoryNode()}
{starredCategoryNode()} {starredCategoryNode()}
{root.children.map((c) => recursiveCategoryNode(c))} {root.children.map(c => recursiveCategoryNode(c))}
{root.feeds.map((f) => feedNode(f))} {root.feeds.map(f => feedNode(f))}
{tags?.map((tag) => tagNode(tag))} {tags?.map(tag => tagNode(tag))}
</Box> </Box>
</Stack> </Stack>
); )
} }

92
commafeed-client/src/components/sidebar/TreeNode.tsx
View File

@@ -1,44 +1,42 @@
import { Box, Center, Indicator } from "@mantine/core"; import { Box, Center } from "@mantine/core"
import type { EntrySourceType } from "app/entries/slice"; import type { EntrySourceType } from "app/entries/slice"
import { FeedFavicon } from "components/content/FeedFavicon"; import { FeedFavicon } from "components/content/FeedFavicon"
import type React from "react"; import type React from "react"
import { tss } from "tss"; import { tss } from "tss"
import { UnreadCount } from "./UnreadCount"; import { UnreadCount } from "./UnreadCount"
interface TreeNodeProps { interface TreeNodeProps {
id: string; id: string
type: EntrySourceType; type: EntrySourceType
name: React.ReactNode; name: React.ReactNode
icon: React.ReactNode; icon: React.ReactNode
unread: number; unread: number
selected: boolean; selected: boolean
expanded?: boolean; expanded?: boolean
level: number; level: number
hasError: boolean; hasError: boolean
newMessages?: boolean newMessages?: boolean
onClick: (e: React.MouseEvent, id: string) => void; onClick: (e: React.MouseEvent, id: string) => void
onIconClick?: (e: React.MouseEvent, id: string) => void; onIconClick?: (e: React.MouseEvent, id: string) => void
} }
const useStyles = tss const useStyles = tss
.withParams<{ .withParams<{
selected: boolean; selected: boolean
hasError: boolean; hasError: boolean
hasUnread: boolean; hasUnread: boolean
}>() }>()
.create(({ theme, colorScheme, selected, hasError, hasUnread }) => { .create(({ theme, colorScheme, selected, hasError, hasUnread }) => {
let backgroundColor = "inherit"; let backgroundColor = "inherit"
if (selected) if (selected) backgroundColor = colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[1]
backgroundColor =
colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[1];
let color: string; let color: string
if (hasError) { if (hasError) {
color = theme.colors.red[6]; color = theme.colors.red[6]
} else if (colorScheme === "dark") { } else if (colorScheme === "dark") {
color = hasUnread ? theme.colors.dark[0] : theme.colors.dark[3]; color = hasUnread ? theme.colors.dark[0] : theme.colors.dark[3]
} else { } else {
color = hasUnread ? theme.black : theme.colors.gray[6]; color = hasUnread ? theme.black : theme.colors.gray[6]
} }
return { return {
@@ -49,10 +47,7 @@ const useStyles = tss
color, color,
backgroundColor, backgroundColor,
"&:hover": { "&:hover": {
backgroundColor: backgroundColor: colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0],
colorScheme === "dark"
? theme.colors.dark[6]
: theme.colors.gray[0],
}, },
}, },
nodeText: { nodeText: {
@@ -61,47 +56,38 @@ const useStyles = tss
overflow: "hidden", overflow: "hidden",
textOverflow: "ellipsis", textOverflow: "ellipsis",
}, },
}; }
}); })
export function TreeNode(props: TreeNodeProps) { export function TreeNode(props: TreeNodeProps) {
const { classes } = useStyles({ const { classes } = useStyles({
selected: props.selected, selected: props.selected,
hasError: props.hasError, hasError: props.hasError,
hasUnread: props.unread > 0, hasUnread: props.unread > 0,
}); })
return ( return (
<Box <Box
py={1} py={1}
pl={props.level * 20} pl={props.level * 20}
className={`${classes.node} cf-treenode cf-treenode-${props.type}`} className={`${classes.node} cf-treenode cf-treenode-${props.type}`}
onClick={(e: React.MouseEvent) => props.onClick(e, props.id)} onClick={e => {
props.onClick(e, props.id)
props.type === "feed" && localStorage.setItem(`feed-${props.id}-unread`, props.unread.toString())
}}
data-id={props.id} data-id={props.id}
data-type={props.type} data-type={props.type}
data-unread-count={props.unread} data-unread-count={props.unread}
> >
<Box <Box mr={6} onClick={(e: React.MouseEvent) => props.onIconClick?.(e, props.id)} className="cf-treenode-icon">
mr={6} <Center>{typeof props.icon === "string" ? <FeedFavicon url={props.icon} /> : props.icon}</Center>
onClick={(e: React.MouseEvent) => props.onIconClick?.(e, props.id)}
className="cf-treenode-icon"
>
<Center>
{typeof props.icon === "string" ? (
<FeedFavicon url={props.icon} />
) : (
props.icon
)}
</Center>
</Box> </Box>
<Box className={classes.nodeText}>{props.name}</Box> <Box className={classes.nodeText}>{props.name}</Box>
{!props.expanded && ( {!props.expanded && (
<Box className="cf-treenode-unread-count"> <Box className="cf-treenode-unread-count">
<UnreadCount <UnreadCount unreadCount={props.unread} newMessages={props.id !== "all" ? props.newMessages : false} />
unreadCount={props.unread}
newMessages={props.id === "all" ? props.newMessages: false}
/>
</Box> </Box>
)} )}
</Box> </Box>
); )
} }

5
commafeed-client/src/components/sidebar/UnreadCount.tsx
View File

@@ -9,16 +9,13 @@ const useStyles = tss.create(() => ({
}, },
})) }))
export function UnreadCount(props: { unreadCount: number, newMessages: boolean | undefined }) { export function UnreadCount(props: { unreadCount: number; newMessages: boolean | undefined }) {
const { classes } = useStyles() const { classes } = useStyles()
if (props.unreadCount <= 0) return null if (props.unreadCount <= 0) return null
const count = props.unreadCount >= 10000 ? "10k+" : props.unreadCount const count = props.unreadCount >= 10000 ? "10k+" : props.unreadCount
console.log(props.newMessages);
return ( return (
<Tooltip label={props.unreadCount} disabled={props.unreadCount === count} openDelay={Constants.tooltip.delay}> <Tooltip label={props.unreadCount} disabled={props.unreadCount === count} openDelay={Constants.tooltip.delay}>
<Indicator disabled={!props.newMessages} size={4} offset={10} position="top-start" color="orange" withBorder={false} zIndex={5}> <Indicator disabled={!props.newMessages} size={4} offset={10} position="top-start" color="orange" withBorder={false} zIndex={5}>