add sharing buttons

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

@@ -1,17 +1,23 @@
 import { t } from "@lingui/macro"
-import { Checkbox, Group } from "@mantine/core"
+import { Checkbox, Group, Popover } from "@mantine/core"
 import { markEntry, starEntry } from "app/slices/entries"
-import { useAppDispatch } from "app/store"
+import { useAppDispatch, useAppSelector } from "app/store"
 import { Entry } from "app/types"
 import { ActionButton } from "components/ActionButtton"
-import { TbExternalLink, TbStar, TbStarOff } from "react-icons/tb"
+import { TbExternalLink, TbShare, TbStar, TbStarOff } from "react-icons/tb"
+import { ShareButtons } from "./ShareButtons"
 
 interface FeedEntryFooterProps {
     entry: Entry
 }
 
 export function FeedEntryFooter(props: FeedEntryFooterProps) {
+    const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
     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 }))
 
     return (
@@ -32,6 +38,18 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
                 label={props.entry.starred ? t`Unstar` : t`Star`}
                 onClick={() => dispatch(starEntry({ entry: props.entry, starred: !props.entry.starred }))}
             />
+
+            {showSharingButtons && (
+                <Popover withArrow withinPortal shadow="md">
+                    <Popover.Target>
+                        <ActionButton icon={<TbShare size={18} />} label={t`Share`} />
+                    </Popover.Target>
+                    <Popover.Dropdown>
+                        <ShareButtons url={props.entry.url} description={props.entry.title} />
+                    </Popover.Dropdown>
+                </Popover>
+            )}
+
             <a href={props.entry.url} target="_blank" rel="noreferrer">
                 <ActionButton icon={<TbExternalLink size={18} />} label={t`Open link`} />
             </a>

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

@@ -0,0 +1,55 @@
+import { ActionIcon, Box, createStyles, SimpleGrid } from "@mantine/core"
+import { Constants } from "app/constants"
+import { useAppSelector } from "app/store"
+import { SharingSettings } from "app/types"
+import { IconType } from "react-icons"
+
+type Color = `#${string}`
+
+const useStyles = createStyles((theme, props: { color: Color }) => ({
+    socialIcon: {
+        color: props.color,
+        backgroundColor: theme.colorScheme === "dark" ? theme.colors.gray[2] : "white",
+        borderRadius: "50%",
+    },
+}))
+
+function ShareButton({ url, icon, color }: { url: string; icon: IconType; color: Color }) {
+    const { classes } = useStyles({ color })
+
+    const onClick = (e: React.MouseEvent) => {
+        e.preventDefault()
+        window.open(url, "", "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=800,height=600")
+    }
+
+    return (
+        <ActionIcon>
+            <a href={url} target="_blank" rel="noreferrer" onClick={onClick}>
+                <Box p={8} className={classes.socialIcon}>
+                    {icon({ size: 18 })}
+                </Box>
+            </a>
+        </ActionIcon>
+    )
+}
+
+export function ShareButtons(props: { url: string; description: string }) {
+    const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
+    const url = encodeURIComponent(props.url)
+    const desc = encodeURIComponent(props.description)
+
+    return (
+        <SimpleGrid cols={4}>
+            {(Object.keys(Constants.sharing) as Array<keyof SharingSettings>)
+                .filter(site => sharingSettings && sharingSettings[site])
+                .map(site => (
+                    <ShareButton
+                        key={site}
+                        icon={Constants.sharing[site].icon}
+                        color={Constants.sharing[site].color}
+                        url={Constants.sharing[site].url(url, desc)}
+                    />
+                ))}
+        </SimpleGrid>
+    )
+}

commafeed-client/src/components/settings/DisplaySettings.tsx

@@ -1,12 +1,15 @@
 import { t } from "@lingui/macro"
-import { Select, Stack, Switch } from "@mantine/core"
-import { changeLanguage, changeScrollSpeed } from "app/slices/user"
+import { Divider, Select, SimpleGrid, Stack, Switch } from "@mantine/core"
+import { Constants } from "app/constants"
+import { changeLanguage, changeScrollSpeed, changeSharingSetting } from "app/slices/user"
 import { useAppDispatch, useAppSelector } from "app/store"
+import { SharingSettings } from "app/types"
 import { locales } from "i18n"
 
 export function DisplaySettings() {
     const language = useAppSelector(state => state.user.settings?.language)
     const scrollSpeed = useAppSelector(state => state.user.settings?.scrollSpeed)
+    const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
     const dispatch = useAppDispatch()
 
     return (
@@ -26,6 +29,19 @@ export function DisplaySettings() {
                 checked={scrollSpeed ? scrollSpeed > 0 : false}
                 onChange={e => dispatch(changeScrollSpeed(e.currentTarget.checked))}
             />
+
+            <Divider label={t`Sharing sites`} labelPosition="center" />
+
+            <SimpleGrid cols={2}>
+                {(Object.keys(Constants.sharing) as Array<keyof SharingSettings>).map(site => (
+                    <Switch
+                        key={site}
+                        label={Constants.sharing[site].label}
+                        checked={sharingSettings && sharingSettings[site]}
+                        onChange={e => dispatch(changeSharingSetting({ site, value: e.currentTarget.checked }))}
+                    />
+                ))}
+            </SimpleGrid>
         </Stack>
     )
 }