add support for starring entries

commafeed-client/src/components/content/FeedEntryFooter.tsx

@@ -1,10 +1,10 @@
 import { t } from "@lingui/macro"
 import { Checkbox, Group } from "@mantine/core"
-import { markEntry } from "app/slices/entries"
+import { markEntry, starEntry } from "app/slices/entries"
 import { useAppDispatch } from "app/store"
 import { Entry } from "app/types"
 import { ActionButton } from "components/ActionButtton"
-import { TbExternalLink } from "react-icons/tb"
+import { TbExternalLink, TbStar, TbStarOff } from "react-icons/tb"
 
 interface FeedEntryFooterProps {
     entry: Entry
@@ -27,6 +27,11 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
                     }}
                 />
             )}
+            <ActionButton
+                icon={props.entry.starred ? <TbStarOff size={18} /> : <TbStar size={18} />}
+                label={props.entry.starred ? t`Unstar` : t`Star`}
+                onClick={() => dispatch(starEntry({ entry: props.entry, starred: !props.entry.starred }))}
+            />
             <a href={props.entry.url} target="_blank" rel="noreferrer">
                 <ActionButton icon={<TbExternalLink size={18} />} label={t`Open link`} />
             </a>

commafeed-client/src/components/content/add/CategorySelect.tsx

@@ -10,7 +10,7 @@ export function CategorySelect(props: CategorySelectProps) {
     const rootCategory = useAppSelector(state => state.tree.rootCategory)
     const categories = rootCategory && flattenCategoryTree(rootCategory)
     const selectData: SelectItem[] | undefined = categories
-        ?.filter(c => c.id !== Constants.categoryIds.all)
+        ?.filter(c => c.id !== Constants.categories.all.id)
         .sort((c1, c2) => c1.name.localeCompare(c2.name))
         .map(c => ({
             label: c.name,
@@ -19,7 +19,7 @@ export function CategorySelect(props: CategorySelectProps) {
     if (props.withAll) {
         selectData?.unshift({
             label: t`All`,
-            value: Constants.categoryIds.all,
+            value: Constants.categories.all.id,
         })
     }
 

commafeed-client/src/components/content/add/Subscribe.tsx

@@ -27,7 +27,7 @@ export function Subscribe() {
         initialValues: {
             url: "",
             title: "",
-            categoryId: Constants.categoryIds.all,
+            categoryId: Constants.categories.all.id,
         },
     })
 

commafeed-client/src/components/sidebar/Tree.tsx

@@ -9,11 +9,12 @@ import { categoryUnreadCount, flattenCategoryTree } from "app/utils"
 import { Loader } from "components/Loader"
 import { OnDesktop } from "components/responsive/OnDesktop"
 import React from "react"
-import { FaChevronDown, FaChevronRight, FaInbox } from "react-icons/fa"
+import { FaChevronDown, FaChevronRight, FaInbox, FaStar } from "react-icons/fa"
 import { TreeNode } from "./TreeNode"
 import { TreeSearch } from "./TreeSearch"
 
 const allIcon = <FaInbox size={14} />
+const starredIcon = <FaStar size={14} />
 const expandedIcon = <FaChevronDown size={14} />
 const collapsedIcon = <FaChevronRight size={14} />
 
@@ -47,11 +48,24 @@ export function Tree() {
 
     const allCategoryNode = () => (
         <TreeNode
-            id={Constants.categoryIds.all}
+            id={Constants.categories.all.id}
             name={t`All`}
             icon={allIcon}
             unread={categoryUnreadCount(root)}
-            selected={source.type === "category" && source.id === Constants.categoryIds.all}
+            selected={source.type === "category" && source.id === Constants.categories.all.id}
+            expanded={false}
+            level={0}
+            hasError={false}
+            onClick={categoryClicked}
+        />
+    )
+    const starredCategoryNode = () => (
+        <TreeNode
+            id={Constants.categories.starred.id}
+            name={t`Starred`}
+            icon={starredIcon}
+            unread={0}
+            selected={source.type === "category" && source.id === Constants.categories.starred.id}
             expanded={false}
             level={0}
             hasError={false}
@@ -109,6 +123,7 @@ export function Tree() {
             </OnDesktop>
             <Box>
                 {allCategoryNode()}
+                {starredCategoryNode()}
                 {root.children.map(c => recursiveCategoryNode(c))}
                 {root.feeds.map(f => feedNode(f))}
             </Box>