add support for tags

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

@@ -1,10 +1,12 @@
 import { t } from "@lingui/macro"
-import { Checkbox, Group, Popover } from "@mantine/core"
-import { markEntriesUpToEntry, markEntry, starEntry } from "app/slices/entries"
+import { Checkbox, Group, MultiSelect, Popover } from "@mantine/core"
+import { Constants } from "app/constants"
+import { markEntriesUpToEntry, markEntry, starEntry, tagEntry } from "app/slices/entries"
 import { useAppDispatch, useAppSelector } from "app/store"
 import { Entry } from "app/types"
 import { ActionButton } from "components/ActionButtton"
-import { TbArrowBarToDown, TbExternalLink, TbShare, TbStar, TbStarOff } from "react-icons/tb"
+import { useEffect, useState } from "react"
+import { TbArrowBarToDown, TbExternalLink, TbShare, TbStar, TbStarOff, TbTag } from "react-icons/tb"
 import { ShareButtons } from "./ShareButtons"
 
 interface FeedEntryFooterProps {
@@ -12,13 +14,30 @@ interface FeedEntryFooterProps {
 }
 
 export function FeedEntryFooter(props: FeedEntryFooterProps) {
+    const [scrollPosition, setScrollPosition] = useState(0)
     const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
+    const tags = useAppSelector(state => state.user.tags)
     const dispatch = useAppDispatch()
 
     const showSharingButtons =
         sharingSettings && (Object.values(sharingSettings) as Array<typeof sharingSettings[keyof typeof sharingSettings]>).some(v => v)
 
     const readStatusCheckboxClicked = () => dispatch(markEntry({ entry: props.entry, read: !props.entry.read }))
+    const onTagsChange = (values: string[]) =>
+        dispatch(
+            tagEntry({
+                entryId: +props.entry.id,
+                tags: values,
+            })
+        )
+
+    useEffect(() => {
+        const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId)
+
+        const listener = () => setScrollPosition(scrollArea ? scrollArea.scrollTop : 0)
+        scrollArea?.addEventListener("scroll", listener)
+        return () => scrollArea?.removeEventListener("scroll", listener)
+    }, [])
 
     return (
         <Group position="apart">
@@ -41,7 +60,7 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
                 />
 
                 {showSharingButtons && (
-                    <Popover withArrow withinPortal shadow="md">
+                    <Popover withArrow withinPortal shadow="md" positionDependencies={[scrollPosition]}>
                         <Popover.Target>
                             <ActionButton icon={<TbShare size={18} />} label={t`Share`} />
                         </Popover.Target>
@@ -51,6 +70,25 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
                     </Popover>
                 )}
 
+                {tags && (
+                    <Popover withArrow withinPortal shadow="md" positionDependencies={[scrollPosition]}>
+                        <Popover.Target>
+                            <ActionButton icon={<TbTag size={18} />} label={t`Tags`} />
+                        </Popover.Target>
+                        <Popover.Dropdown>
+                            <MultiSelect
+                                data={tags}
+                                placeholder="Tags"
+                                searchable
+                                creatable
+                                getCreateLabel={query => t`Create tag: ${query}`}
+                                value={props.entry.tags}
+                                onChange={onTagsChange}
+                            />
+                        </Popover.Dropdown>
+                    </Popover>
+                )}
+
                 <a href={props.entry.url} target="_blank" rel="noreferrer">
                     <ActionButton icon={<TbExternalLink size={18} />} label={t`Open link`} />
                 </a>