From 2f4ee7cff83d5fbf4ca12b6806bf107b86b814ff Mon Sep 17 00:00:00 2001
From: Athou <jeremiepanzer@gmail.com>
Date: Sat, 3 Aug 2024 12:37:33 +0200
Subject: [PATCH] add data attributes to tree elements (#1507)

---
 .../src/components/content/FeedEntries.tsx           |  1 +
 commafeed-client/src/components/sidebar/Tree.tsx     |  5 +++++
 commafeed-client/src/components/sidebar/TreeNode.tsx | 12 +++++++++++-
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/commafeed-client/src/components/content/FeedEntries.tsx b/commafeed-client/src/components/content/FeedEntries.tsx
index b7ec126b..6e4e1f0f 100644
--- a/commafeed-client/src/components/content/FeedEntries.tsx
+++ b/commafeed-client/src/components/content/FeedEntries.tsx
@@ -310,6 +310,7 @@ export function FeedEntries() {
                     ref={el => {
                         if (el) el.id = Constants.dom.entryId(entry)
                     }}
+                    data-id={entry.id}
                 >
                     <FeedEntry
                         entry={entry}
diff --git a/commafeed-client/src/components/sidebar/Tree.tsx b/commafeed-client/src/components/sidebar/Tree.tsx
index 0b1e91ff..3b37abd5 100644
--- a/commafeed-client/src/components/sidebar/Tree.tsx
+++ b/commafeed-client/src/components/sidebar/Tree.tsx
@@ -70,6 +70,7 @@ export function Tree() {
     const allCategoryNode = () => (
         <TreeNode
             id={Constants.categories.all.id}
+            type="category"
             name={<Trans>All</Trans>}
             icon={allIcon}
             unread={categoryUnreadCount(root)}
@@ -83,6 +84,7 @@ export function Tree() {
     const starredCategoryNode = () => (
         <TreeNode
             id={Constants.categories.starred.id}
+            type="category"
             name={<Trans>Starred</Trans>}
             icon={starredIcon}
             unread={0}
@@ -102,6 +104,7 @@ export function Tree() {
         return (
             <TreeNode
                 id={category.id}
+                type="category"
                 name={category.name}
                 icon={category.expanded ? expandedIcon : collapsedIcon}
                 unread={unreadCount}
@@ -122,6 +125,7 @@ export function Tree() {
         return (
             <TreeNode
                 id={String(feed.id)}
+                type="feed"
                 name={feed.name}
                 icon={feed.iconUrl}
                 unread={feed.unread}
@@ -137,6 +141,7 @@ export function Tree() {
     const tagNode = (tag: string) => (
         <TreeNode
             id={tag}
+            type="tag"
             name={tag}
             icon={tagIcon}
             unread={0}
diff --git a/commafeed-client/src/components/sidebar/TreeNode.tsx b/commafeed-client/src/components/sidebar/TreeNode.tsx
index 485367c6..f791de8b 100644
--- a/commafeed-client/src/components/sidebar/TreeNode.tsx
+++ b/commafeed-client/src/components/sidebar/TreeNode.tsx
@@ -1,4 +1,5 @@
 import { Box, Center } from "@mantine/core"
+import type { EntrySourceType } from "app/entries/slice"
 import { FeedFavicon } from "components/content/FeedFavicon"
 import type React from "react"
 import { tss } from "tss"
@@ -6,6 +7,7 @@ import { UnreadCount } from "./UnreadCount"
 
 interface TreeNodeProps {
     id: string
+    type: EntrySourceType
     name: React.ReactNode
     icon: React.ReactNode
     unread: number
@@ -63,7 +65,15 @@ export function TreeNode(props: TreeNodeProps) {
         hasUnread: props.unread > 0,
     })
     return (
-        <Box py={1} pl={props.level * 20} className={classes.node} onClick={(e: React.MouseEvent) => props.onClick(e, props.id)}>
+        <Box
+            py={1}
+            pl={props.level * 20}
+            className={classes.node}
+            onClick={(e: React.MouseEvent) => props.onClick(e, props.id)}
+            data-id={props.id}
+            data-type={props.type}
+            data-unread-count={props.unread}
+        >
             <Box mr={6} onClick={(e: React.MouseEvent) => props.onIconClick?.(e, props.id)}>
                 <Center>{typeof props.icon === "string" ? <FeedFavicon url={props.icon} /> : props.icon}</Center>
             </Box>