replace old client with new client from commafeed-ui repository

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

@@ -0,0 +1,30 @@
+import { createStyles, Text } from "@mantine/core"
+
+export interface ContentProps {
+    content: string
+}
+
+const useStyles = createStyles(theme => ({
+    content: {
+        // break long links or long words
+        overflowWrap: "anywhere",
+        "& a": {
+            color: theme.fn.variant({ color: theme.primaryColor, variant: "subtle" }).color,
+        },
+        "& img": {
+            maxWidth: "100%",
+            height: "auto",
+        },
+        "& iframe": {
+            maxWidth: "100%",
+        },
+        "& pre, & code": {
+            whiteSpace: "pre-wrap",
+        },
+    },
+}))
+
+export function Content(props: ContentProps) {
+    const { classes } = useStyles()
+    return <Text size="md" className={classes.content} dangerouslySetInnerHTML={{ __html: props.content }} />
+}

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

@@ -0,0 +1,32 @@
+import { createStyles } from "@mantine/core"
+
+const useStyles = createStyles(() => ({
+    enclosureImage: {
+        maxWidth: "100%",
+        height: "auto",
+    },
+}))
+
+export function Enclosure(props: { enclosureType?: string; enclosureUrl?: string }) {
+    const { classes } = useStyles()
+    const hasVideo = props.enclosureType && props.enclosureType.indexOf("video") === 0
+    const hasAudio = props.enclosureType && props.enclosureType.indexOf("audio") === 0
+    const hasImage = props.enclosureType && props.enclosureType.indexOf("image") === 0
+    return (
+        <>
+            {hasVideo && (
+                // eslint-disable-next-line jsx-a11y/media-has-caption
+                <video controls>
+                    <source src={props.enclosureUrl} type={props.enclosureType} />
+                </video>
+            )}
+            {hasAudio && (
+                // eslint-disable-next-line jsx-a11y/media-has-caption
+                <audio controls>
+                    <source src={props.enclosureUrl} type={props.enclosureType} />
+                </audio>
+            )}
+            {hasImage && <img src={props.enclosureUrl} alt="enclosure" className={classes.enclosureImage} />}
+        </>
+    )
+}

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

@@ -0,0 +1,155 @@
+import { Constants } from "app/constants"
+import {
+    loadMoreEntries,
+    markAllEntries,
+    markEntry,
+    reloadEntries,
+    selectEntry,
+    selectNextEntry,
+    selectPreviousEntry,
+} from "app/slices/entries"
+import { redirectToRootCategory } from "app/slices/redirect"
+import { useAppDispatch, useAppSelector } from "app/store"
+import { Loader } from "components/Loader"
+import { useMousetrap } from "hooks/useMousetrap"
+import { useEffect, useRef } from "react"
+import InfiniteScroll from "react-infinite-scroller"
+import { FeedEntry } from "./FeedEntry"
+
+export function FeedEntries() {
+    const source = useAppSelector(state => state.entries.source)
+    const entries = useAppSelector(state => state.entries.entries)
+    const entriesTimestamp = useAppSelector(state => state.entries.timestamp)
+    const selectedEntryId = useAppSelector(state => state.entries.selectedEntryId)
+    const hasMore = useAppSelector(state => state.entries.hasMore)
+    const dispatch = useAppDispatch()
+
+    const selectedEntry = entries.find(e => e.id === selectedEntryId)
+
+    // references to entries html elements
+    const refs = useRef<{ [id: string]: HTMLDivElement }>({})
+    useEffect(() => {
+        // remove refs that are not in entries anymore
+        Object.keys(refs.current).forEach(k => {
+            const found = entries.some(e => e.id === k)
+            if (!found) delete refs.current[k]
+        })
+    }, [entries])
+
+    useMousetrap("r", () => {
+        dispatch(reloadEntries())
+    })
+    useMousetrap("j", () => {
+        dispatch(selectNextEntry())
+    })
+    useMousetrap("k", () => {
+        dispatch(selectPreviousEntry())
+    })
+    useMousetrap("space", () => {
+        if (selectedEntry) {
+            if (selectedEntry.expanded) {
+                const ref = refs.current[selectedEntry.id]
+                const bottomVisible = ref.getBoundingClientRect().bottom <= window.innerHeight
+                if (bottomVisible) {
+                    dispatch(selectNextEntry())
+                } else {
+                    const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId)
+                    scrollArea?.scrollTo({
+                        top: scrollArea.scrollTop + scrollArea.clientHeight * 0.8,
+                        behavior: "smooth",
+                    })
+                }
+            } else {
+                dispatch(selectEntry(selectedEntry))
+            }
+        } else {
+            dispatch(selectNextEntry())
+        }
+    })
+    useMousetrap("shift+space", () => {
+        if (selectedEntry) {
+            if (selectedEntry.expanded) {
+                const ref = refs.current[selectedEntry.id]
+                const topVisible = ref.getBoundingClientRect().top >= Constants.layout.headerHeight
+                if (topVisible) {
+                    dispatch(selectPreviousEntry())
+                } else {
+                    const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId)
+                    scrollArea?.scrollTo({
+                        top: scrollArea.scrollTop - scrollArea.clientHeight * 0.8,
+                        behavior: "smooth",
+                    })
+                }
+            } else {
+                dispatch(selectPreviousEntry())
+            }
+        }
+    })
+    useMousetrap(["o", "enter"], () => {
+        // toggle expanded status
+        if (!selectedEntry) return
+        dispatch(selectEntry(selectedEntry))
+    })
+    useMousetrap("v", () => {
+        // open tab in foreground
+        if (!selectedEntry) return
+        window.open(selectedEntry.url, "_blank", "noreferrer")
+    })
+    useMousetrap("b", () => {
+        // simulate ctrl+click to open tab in background
+        if (!selectedEntry) return
+        const a = document.createElement("a")
+        a.href = selectedEntry.url
+        a.rel = "noreferrer"
+        a.dispatchEvent(
+            new MouseEvent("click", {
+                ctrlKey: true,
+                metaKey: true,
+            })
+        )
+    })
+    useMousetrap("m", () => {
+        // toggle read status
+        if (!selectedEntry) return
+        dispatch(markEntry({ entry: selectedEntry, read: !selectedEntry.read }))
+    })
+    useMousetrap("shift+a", () => {
+        // mark all entries as read
+        dispatch(
+            markAllEntries({
+                sourceType: source.type,
+                req: {
+                    id: source.id,
+                    read: true,
+                    olderThan: entriesTimestamp,
+                },
+            })
+        )
+    })
+    useMousetrap("g a", () => {
+        dispatch(redirectToRootCategory())
+    })
+
+    if (!entries) return <Loader />
+    return (
+        <InfiniteScroll
+            initialLoad={false}
+            loadMore={() => dispatch(loadMoreEntries())}
+            hasMore={hasMore}
+            loader={<Loader key={0} />}
+            useWindow={false}
+            getScrollParent={() => document.getElementById(Constants.dom.mainScrollAreaId)}
+        >
+            {entries.map(e => (
+                <div
+                    key={e.id}
+                    ref={el => {
+                        refs.current[e.id] = el!
+                    }}
+                >
+                    <FeedEntry entry={e} expanded={!!e.expanded} />
+                </div>
+            ))}
+        </InfiniteScroll>
+    )
+}

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

@@ -0,0 +1,97 @@
+import { Anchor, Box, createStyles, Divider, Paper } from "@mantine/core"
+import { Constants } from "app/constants"
+import { markEntry, selectEntry } from "app/slices/entries"
+import { useAppDispatch, useAppSelector } from "app/store"
+import { Entry } from "app/types"
+import React, { useEffect, useRef } from "react"
+import { FeedEntryBody } from "./FeedEntryBody"
+import { FeedEntryFooter } from "./FeedEntryFooter"
+import { FeedEntryHeader } from "./FeedEntryHeader"
+
+interface FeedEntryProps {
+    entry: Entry
+    expanded: boolean
+}
+
+const useStyles = createStyles((theme, props: FeedEntryProps) => {
+    let backgroundColor
+    if (theme.colorScheme === "dark") backgroundColor = props.entry.read ? "inherit" : theme.colors.dark[5]
+    else backgroundColor = props.entry.read && !props.expanded ? theme.colors.gray[0] : "inherit"
+
+    return {
+        paper: {
+            backgroundColor,
+            marginTop: theme.spacing.xs,
+            marginBottom: theme.spacing.xs,
+            [theme.fn.smallerThan(Constants.layout.mobileBreakpoint)]: {
+                marginTop: "6px",
+                marginBottom: "6px",
+            },
+        },
+        body: {
+            maxWidth: "650px",
+        },
+    }
+})
+
+export function FeedEntry(props: FeedEntryProps) {
+    const { classes } = useStyles(props)
+    const scrollSpeed = useAppSelector(state => state.user.settings?.scrollSpeed)
+    const dispatch = useAppDispatch()
+
+    const headerClicked = (e: React.MouseEvent) => {
+        if (e.button === 1 || e.ctrlKey || e.metaKey) {
+            // middle click
+            dispatch(markEntry({ entry: props.entry, read: true }))
+        } else if (e.button === 0) {
+            // main click
+            // don't trigger the link
+            e.preventDefault()
+
+            dispatch(selectEntry(props.entry))
+        }
+    }
+
+    // scroll to entry when expanded
+    const ref = useRef<HTMLDivElement>(null)
+    useEffect(() => {
+        setTimeout(() => {
+            if (!ref.current) return
+            if (!props.expanded) return
+
+            document.getElementById(Constants.dom.mainScrollAreaId)?.scrollTo({
+                // having a small gap between the top of the content and the top of the page is sexier
+                top: ref.current.offsetTop - 3,
+                behavior: scrollSpeed && scrollSpeed > 0 ? "smooth" : "auto",
+            })
+        })
+    }, [props.expanded, scrollSpeed])
+
+    return (
+        <div ref={ref}>
+            <Paper shadow="xs" withBorder className={classes.paper}>
+                <Anchor
+                    variant="text"
+                    href={props.entry.url}
+                    target="_blank"
+                    rel="noreferrer"
+                    onClick={headerClicked}
+                    onAuxClick={headerClicked}
+                >
+                    <Box p="xs">
+                        <FeedEntryHeader entry={props.entry} expanded={props.expanded} />
+                    </Box>
+                </Anchor>
+                {props.expanded && (
+                    <Box px="xs" pb="xs">
+                        <Box className={classes.body}>
+                            <FeedEntryBody entry={props.entry} />
+                        </Box>
+                        <Divider variant="dashed" my="xs" />
+                        <FeedEntryFooter entry={props.entry} />
+                    </Box>
+                )}
+            </Paper>
+        </div>
+    )
+}

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

@@ -0,0 +1,35 @@
+import { Box } from "@mantine/core"
+import { Entry } from "app/types"
+import { Content } from "./Content"
+import { Enclosure } from "./Enclosure"
+import { Media } from "./Media"
+
+export interface FeedEntryBodyProps {
+    entry: Entry
+}
+
+export function FeedEntryBody(props: FeedEntryBodyProps) {
+    return (
+        <Box>
+            <Box>
+                <Content content={props.entry.content} />
+            </Box>
+            {props.entry.enclosureUrl && (
+                <Box pt="md">
+                    <Enclosure enclosureType={props.entry.enclosureType} enclosureUrl={props.entry.enclosureUrl} />
+                </Box>
+            )}
+            {/* show media only if we don't have content to avoid duplicate content */}
+            {!props.entry.content && props.entry.mediaThumbnailUrl && (
+                <Box pt="md">
+                    <Media
+                        thumbnailUrl={props.entry.mediaThumbnailUrl}
+                        thumbnailWidth={props.entry.mediaThumbnailWidth}
+                        thumbnailHeight={props.entry.mediaThumbnailHeight}
+                        description={props.entry.mediaDescription}
+                    />
+                </Box>
+            )}
+        </Box>
+    )
+}

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

@@ -0,0 +1,35 @@
+import { t } from "@lingui/macro"
+import { Checkbox, Group } from "@mantine/core"
+import { markEntry } 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"
+
+interface FeedEntryFooterProps {
+    entry: Entry
+}
+
+export function FeedEntryFooter(props: FeedEntryFooterProps) {
+    const dispatch = useAppDispatch()
+    const readStatusCheckboxClicked = () => dispatch(markEntry({ entry: props.entry, read: !props.entry.read }))
+
+    return (
+        <Group>
+            {props.entry.markable && (
+                <Checkbox
+                    label={t`Keep unread`}
+                    checked={!props.entry.read}
+                    onChange={readStatusCheckboxClicked}
+                    styles={{
+                        label: { cursor: "pointer" },
+                        input: { cursor: "pointer" },
+                    }}
+                />
+            )}
+            <a href={props.entry.url} target="_blank" rel="noreferrer">
+                <ActionButton icon={<TbExternalLink size={18} />} label={t`Open link`} />
+            </a>
+        </Group>
+    )
+}

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

@@ -0,0 +1,56 @@
+import { Box, createStyles, Image, Text } from "@mantine/core"
+import { Entry } from "app/types"
+import { RelativeDate } from "components/RelativeDate"
+
+export interface FeedEntryHeaderProps {
+    entry: Entry
+    expanded: boolean
+}
+
+const useStyles = createStyles((theme, props: FeedEntryHeaderProps) => ({
+    headerText: {
+        fontWeight: theme.colorScheme === "light" && !props.entry.read ? "bold" : "inherit",
+        whiteSpace: props.expanded ? "inherit" : "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+    },
+    headerSubtext: {
+        display: "flex",
+        alignItems: "center",
+        fontSize: "90%",
+        whiteSpace: props.expanded ? "inherit" : "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+    },
+}))
+export function FeedEntryHeader(props: FeedEntryHeaderProps) {
+    const { classes } = useStyles(props)
+    return (
+        <Box>
+            <Box className={classes.headerText}>{props.entry.title}</Box>
+            <Box className={classes.headerSubtext}>
+                <Box mr={6}>
+                    <Image src={props.entry.iconUrl} alt="feed icon" width={18} height={18} />
+                </Box>
+                <Box>
+                    <Text color="dimmed">{props.entry.feedName}</Text>
+                </Box>
+                <Box>
+                    <Text color="dimmed">
+                        <span>&nbsp;·&nbsp;</span>
+                        <RelativeDate date={props.entry.date} />
+                    </Text>
+                </Box>
+            </Box>
+            {props.expanded && (
+                <Box className={classes.headerSubtext}>
+                    <Text color="dimmed">
+                        {props.entry.author && <span>by {props.entry.author}</span>}
+                        {props.entry.author && props.entry.categories && <span>&nbsp;·&nbsp;</span>}
+                        {props.entry.categories && <span>{props.entry.categories}</span>}
+                    </Text>
+                </Box>
+            )}
+        </Box>
+    )
+}

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

@@ -0,0 +1,36 @@
+import { Box, createStyles } from "@mantine/core"
+import { Content } from "./Content"
+
+export interface MediaProps {
+    thumbnailUrl: string
+    thumbnailWidth?: number
+    thumbnailHeight?: number
+    description?: string
+}
+
+const useStyles = createStyles(() => ({
+    image: {
+        maxWidth: "100%",
+        height: "auto",
+    },
+}))
+
+export function Media(props: MediaProps) {
+    const { classes } = useStyles()
+    return (
+        <>
+            <img
+                className={classes.image}
+                src={props.thumbnailUrl}
+                width={props.thumbnailWidth}
+                height={props.thumbnailHeight}
+                alt="media thumbnail"
+            />
+            {props.description && (
+                <Box pt="md">
+                    <Content content={props.description} />
+                </Box>
+            )}
+        </>
+    )
+}

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

@@ -0,0 +1,51 @@
+import { t, Trans } from "@lingui/macro"
+import { Box, Button, Group, Stack, TextInput } from "@mantine/core"
+import { useForm } from "@mantine/form"
+import { client, errorToStrings } from "app/client"
+import { redirectToSelectedSource } from "app/slices/redirect"
+import { reloadTree } from "app/slices/tree"
+import { useAppDispatch } from "app/store"
+import { AddCategoryRequest } from "app/types"
+import { Alert } from "components/Alert"
+import { TbFolderPlus } from "react-icons/tb"
+import useMutation from "use-mutation"
+import { CategorySelect } from "./CategorySelect"
+
+export function AddCategory() {
+    const dispatch = useAppDispatch()
+
+    const form = useForm<AddCategoryRequest>()
+
+    const [addCategory, addCategoryResult] = useMutation(client.category.add, {
+        onSuccess: () => {
+            dispatch(reloadTree())
+            dispatch(redirectToSelectedSource())
+        },
+    })
+    const errors = errorToStrings(addCategoryResult.error)
+
+    return (
+        <>
+            {errors.length > 0 && (
+                <Box mb="md">
+                    <Alert messages={errors} />
+                </Box>
+            )}
+
+            <form onSubmit={form.onSubmit(addCategory)}>
+                <Stack>
+                    <TextInput label={t`Category`} placeholder={t`Category`} {...form.getInputProps("name")} required />
+                    <CategorySelect label={t`Parent`} {...form.getInputProps("parentId")} clearable />
+                    <Group position="center">
+                        <Button variant="default" onClick={() => dispatch(redirectToSelectedSource())}>
+                            <Trans>Cancel</Trans>
+                        </Button>
+                        <Button type="submit" leftIcon={<TbFolderPlus size={16} />} loading={addCategoryResult.status === "running"}>
+                            <Trans>Add</Trans>
+                        </Button>
+                    </Group>
+                </Stack>
+            </form>
+        </>
+    )
+}

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

@@ -0,0 +1,18 @@
+import { Select, SelectItem, SelectProps } from "@mantine/core"
+import { Constants } from "app/constants"
+import { useAppSelector } from "app/store"
+import { flattenCategoryTree } from "app/utils"
+
+export function CategorySelect(props: Partial<SelectProps>) {
+    const rootCategory = useAppSelector(state => state.tree.rootCategory)
+    const categories = rootCategory && flattenCategoryTree(rootCategory)
+    const selectData: SelectItem[] | undefined = categories
+        ?.filter(c => c.id !== Constants.categoryIds.all)
+        .sort((c1, c2) => c1.name.localeCompare(c2.name))
+        .map(c => ({
+            label: c.name,
+            value: c.id,
+        }))
+
+    return <Select {...props} data={selectData ?? []} disabled={!selectData} />
+}

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

@@ -0,0 +1,59 @@
+import { t, Trans } from "@lingui/macro"
+import { Box, Button, FileInput, Group, Stack } from "@mantine/core"
+import { useForm } from "@mantine/form"
+import { client, errorToStrings } from "app/client"
+import { redirectToSelectedSource } from "app/slices/redirect"
+import { reloadTree } from "app/slices/tree"
+import { useAppDispatch } from "app/store"
+import { Alert } from "components/Alert"
+import { TbFileImport } from "react-icons/tb"
+import useMutation from "use-mutation"
+
+export function ImportOpml() {
+    const dispatch = useAppDispatch()
+
+    const form = useForm<{ file: File }>({
+        validate: {
+            file: v => (v ? null : t`file is required`),
+        },
+    })
+
+    const [importOpml, importOpmlResult] = useMutation(client.feed.importOpml, {
+        onSuccess: () => {
+            dispatch(reloadTree())
+            dispatch(redirectToSelectedSource())
+        },
+    })
+    const errors = errorToStrings(importOpmlResult.error)
+
+    return (
+        <>
+            {errors.length > 0 && (
+                <Box mb="md">
+                    <Alert messages={errors} />
+                </Box>
+            )}
+
+            <form onSubmit={form.onSubmit(v => importOpml(v.file))}>
+                <Stack>
+                    <FileInput
+                        label={t`OPML file`}
+                        placeholder={t`OPML file`}
+                        description={t`An opml file is an XML file containing feed URLs and categories. You can get an OPML file by exporting your data from other feed reading services.`}
+                        {...form.getInputProps("file")}
+                        required
+                        accept="application/xml"
+                    />
+                    <Group position="center">
+                        <Button variant="default" onClick={() => dispatch(redirectToSelectedSource())}>
+                            <Trans>Cancel</Trans>
+                        </Button>
+                        <Button type="submit" leftIcon={<TbFileImport size={16} />} loading={importOpmlResult.status === "running"}>
+                            <Trans>Import</Trans>
+                        </Button>
+                    </Group>
+                </Stack>
+            </form>
+        </>
+    )
+}

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

@@ -0,0 +1,116 @@
+import { t, Trans } from "@lingui/macro"
+import { Box, Button, Group, Stack, Stepper, TextInput } from "@mantine/core"
+import { useForm } from "@mantine/form"
+import { client, errorsToStrings, errorToStrings } from "app/client"
+import { Constants } from "app/constants"
+import { redirectToSelectedSource } from "app/slices/redirect"
+import { reloadTree } from "app/slices/tree"
+import { useAppDispatch } from "app/store"
+import { FeedInfoRequest, SubscribeRequest } from "app/types"
+import { Alert } from "components/Alert"
+import { useState } from "react"
+import { TbRss } from "react-icons/tb"
+import useMutation from "use-mutation"
+import { CategorySelect } from "./CategorySelect"
+
+export function Subscribe() {
+    const [activeStep, setActiveStep] = useState(0)
+    const dispatch = useAppDispatch()
+
+    const step0Form = useForm<FeedInfoRequest>({
+        initialValues: {
+            url: "",
+        },
+    })
+
+    const step1Form = useForm<SubscribeRequest>({
+        initialValues: {
+            url: "",
+            title: "",
+            categoryId: Constants.categoryIds.all,
+        },
+    })
+
+    const [fetchFeed, fetchFeedResult] = useMutation(client.feed.fetchFeed, {
+        onSuccess: ({ data }) => {
+            step1Form.setFieldValue("url", data.data.url)
+            step1Form.setFieldValue("title", data.data.title)
+            setActiveStep(step => step + 1)
+        },
+    })
+    const [subscribe, subscribeResult] = useMutation(client.feed.subscribe, {
+        onSuccess: () => {
+            dispatch(reloadTree())
+            dispatch(redirectToSelectedSource())
+        },
+    })
+    const errors = errorsToStrings([fetchFeedResult.error, errorToStrings(subscribeResult.error)])
+
+    const previousStep = () => {
+        if (activeStep === 0) dispatch(redirectToSelectedSource())
+        else setActiveStep(activeStep - 1)
+    }
+    const nextStep = (e: React.FormEvent<HTMLFormElement>) => {
+        if (activeStep === 0) {
+            step0Form.onSubmit(fetchFeed)(e)
+        } else if (activeStep === 1) {
+            step1Form.onSubmit(subscribe)(e)
+        }
+    }
+
+    return (
+        <>
+            {errors.length > 0 && (
+                <Box mb="md">
+                    <Alert messages={errors} />
+                </Box>
+            )}
+
+            <form onSubmit={nextStep}>
+                <Stepper active={activeStep} onStepClick={setActiveStep}>
+                    <Stepper.Step
+                        label={t`Analyze feed`}
+                        description={t`Check that the feed is working`}
+                        allowStepSelect={activeStep === 1}
+                    >
+                        <TextInput
+                            label={t`Feed URL`}
+                            placeholder="http://www.mysite.com/rss"
+                            description={t`The URL for the feed you want to subscribe to. You can also use the website's url directly and CommaFeed will try to find the feed in the page.`}
+                            required
+                            autoFocus
+                            {...step0Form.getInputProps("url")}
+                        />
+                    </Stepper.Step>
+                    <Stepper.Step label={t`Subscribe`} description={t`Subscribe to the feed`} allowStepSelect={false}>
+                        <Stack>
+                            <TextInput label={t`Feed URL`} {...step1Form.getInputProps("url")} disabled />
+                            <TextInput label={t`Feed name`} {...step1Form.getInputProps("title")} required autoFocus />
+                            <CategorySelect label={t`Category`} {...step1Form.getInputProps("categoryId")} clearable />
+                        </Stack>
+                    </Stepper.Step>
+                </Stepper>
+
+                <Group position="center" mt="xl">
+                    <Button variant="default" onClick={previousStep}>
+                        <Trans>Back</Trans>
+                    </Button>
+                    {activeStep === 0 && (
+                        <Button type="submit" loading={fetchFeedResult.status === "running"}>
+                            <Trans>Next</Trans>
+                        </Button>
+                    )}
+                    {activeStep === 1 && (
+                        <Button
+                            type="submit"
+                            leftIcon={<TbRss size={16} />}
+                            loading={fetchFeedResult.status === "running" || subscribeResult.status === "running"}
+                        >
+                            <Trans>Subscribe</Trans>
+                        </Button>
+                    )}
+                </Group>
+            </form>
+        </>
+    )
+}