replace old client with new client from commafeed-ui repository

commafeed-client/src/components/ActionButtton.tsx

@@ -0,0 +1,28 @@
+import { ActionIcon, Button, useMantineTheme } from "@mantine/core"
+import { useMediaQuery } from "@mantine/hooks"
+import { forwardRef } from "react"
+
+interface ActionButtonProps {
+    className?: string
+    icon?: React.ReactNode
+    label?: string
+    onClick?: React.MouseEventHandler
+}
+
+/**
+ * Switches between Button with label (desktop) and ActionIcon (mobile)
+ */
+export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>((props: ActionButtonProps, ref) => {
+    const theme = useMantineTheme()
+    const mobile = !useMediaQuery(`(min-width: ${theme.breakpoints.lg}px)`)
+    return mobile ? (
+        <ActionIcon ref={ref} color={theme.primaryColor} variant="subtle" className={props.className} onClick={props.onClick}>
+            {props.icon}
+        </ActionIcon>
+    ) : (
+        <Button ref={ref} variant="subtle" size="xs" className={props.className} leftIcon={props.icon} onClick={props.onClick}>
+            {props.label}
+        </Button>
+    )
+})
+ActionButton.displayName = "HeaderButton"

commafeed-client/src/components/Alert.tsx

@@ -0,0 +1,48 @@
+import { t } from "@lingui/macro"
+import { Alert as MantineAlert, Box } from "@mantine/core"
+import { Fragment } from "react"
+import { TbAlertCircle, TbAlertTriangle, TbCircleCheck } from "react-icons/tb"
+
+type Level = "error" | "warning" | "success"
+export interface ErrorsAlertProps {
+    level?: Level
+    messages: string[]
+}
+
+export function Alert(props: ErrorsAlertProps) {
+    let title: string
+    let color: string
+    let icon: React.ReactNode
+
+    const level = props.level ?? "error"
+    switch (level) {
+        case "error":
+            title = t`Error`
+            color = "red"
+            icon = <TbAlertCircle />
+            break
+        case "warning":
+            title = t`Warning`
+            color = "orange"
+            icon = <TbAlertTriangle />
+            break
+        case "success":
+            title = t`Success`
+            color = "green"
+            icon = <TbCircleCheck />
+            break
+        default:
+            throw Error(`unsupported level: ${level}`)
+    }
+
+    return (
+        <MantineAlert title={title} color={color} icon={icon}>
+            {props.messages.map((m, i) => (
+                <Fragment key={m}>
+                    <Box>{m}</Box>
+                    {i !== props.messages.length - 1 && <br />}
+                </Fragment>
+            ))}
+        </MantineAlert>
+    )
+}

commafeed-client/src/components/Loader.tsx

@@ -0,0 +1,9 @@
+import { Center, Loader as MantineLoader } from "@mantine/core"
+
+export function Loader() {
+    return (
+        <Center>
+            <MantineLoader size="xl" variant="bars" />
+        </Center>
+    )
+}

commafeed-client/src/components/Logo.tsx

@@ -0,0 +1,10 @@
+import { Image } from "@mantine/core"
+import logo from "assets/logo.svg"
+
+export interface LogoProps {
+    size: number
+}
+
+export function Logo(props: LogoProps) {
+    return <Image src={logo} width={props.size} />
+}

commafeed-client/src/components/RelativeDate.tsx

@@ -0,0 +1,14 @@
+import { Trans } from "@lingui/macro"
+import dayjs from "dayjs"
+import { useEffect, useState } from "react"
+
+export function RelativeDate(props: { date: Date | number | undefined }) {
+    const [now, setNow] = useState(new Date())
+    useEffect(() => {
+        const interval = setInterval(() => setNow(new Date()), 60 * 1000)
+        return () => clearInterval(interval)
+    }, [])
+
+    if (!props.date) return <Trans>N/A</Trans>
+    return <>{dayjs(props.date).from(dayjs(now))}</>
+}

commafeed-client/src/components/admin/UserEdit.tsx

@@ -0,0 +1,51 @@
+import { t, Trans } from "@lingui/macro"
+import { Box, Button, Checkbox, Group, PasswordInput, Stack, TextInput } from "@mantine/core"
+import { useForm } from "@mantine/form"
+import { client, errorToStrings } from "app/client"
+import { UserModel } from "app/types"
+import { Alert } from "components/Alert"
+import { TbDeviceFloppy } from "react-icons/tb"
+import useMutation from "use-mutation"
+
+interface UserEditProps {
+    user?: UserModel
+    onCancel: () => void
+    onSave: () => void
+}
+
+export function UserEdit(props: UserEditProps) {
+    const form = useForm<UserModel>({
+        initialValues: props.user ?? ({ enabled: true } as UserModel),
+    })
+    const [saveUser, saveUserResult] = useMutation(client.admin.saveUser, { onSuccess: props.onSave })
+    const errors = errorToStrings(saveUserResult.error)
+
+    return (
+        <>
+            {errors.length > 0 && (
+                <Box mb="md">
+                    <Alert messages={errors} />
+                </Box>
+            )}
+
+            <form onSubmit={form.onSubmit(saveUser)}>
+                <Stack>
+                    <TextInput label={t`Name`} {...form.getInputProps("name")} required />
+                    <PasswordInput label={t`Password`} {...form.getInputProps("password")} required={!props.user} />
+                    <TextInput type="email" label={t`E-mail`} {...form.getInputProps("email")} />
+                    <Checkbox label={t`Admin`} {...form.getInputProps("admin", { type: "checkbox" })} />
+                    <Checkbox label={t`Enabled`} {...form.getInputProps("enabled", { type: "checkbox" })} />
+
+                    <Group>
+                        <Button variant="default" onClick={props.onCancel}>
+                            <Trans>Cancel</Trans>
+                        </Button>
+                        <Button type="submit" leftIcon={<TbDeviceFloppy size={16} />} loading={saveUserResult.status === "running"}>
+                            <Trans>Save</Trans>
+                        </Button>
+                    </Group>
+                </Stack>
+            </form>
+        </>
+    )
+}

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>
+        </>
+    )
+}

commafeed-client/src/components/header/Header.tsx

@@ -0,0 +1,77 @@
+import { t, Trans } from "@lingui/macro"
+import { Center, Code, Divider, Group, Text } from "@mantine/core"
+import { openConfirmModal } from "@mantine/modals"
+import { markAllEntries, reloadEntries } from "app/slices/entries"
+import { changeReadingMode, changeReadingOrder } from "app/slices/user"
+import { useAppDispatch, useAppSelector } from "app/store"
+import { ActionButton } from "components/ActionButtton"
+import { Loader } from "components/Loader"
+import { TbArrowDown, TbArrowUp, TbChecks, TbEye, TbEyeOff, TbRefresh, TbUser } from "react-icons/tb"
+import { ProfileMenu } from "./ProfileMenu"
+
+function HeaderDivider() {
+    return <Divider orientation="vertical" />
+}
+
+const iconSize = 18
+
+export function Header() {
+    const source = useAppSelector(state => state.entries.source)
+    const sourceLabel = useAppSelector(state => state.entries.sourceLabel)
+    const entriesTimestamp = useAppSelector(state => state.entries.timestamp)
+    const settings = useAppSelector(state => state.user.settings)
+    const profile = useAppSelector(state => state.user.profile)
+    const dispatch = useAppDispatch()
+
+    const openMarkAllEntriesModal = () =>
+        openConfirmModal({
+            title: t`Mark all entries as read`,
+            children: (
+                <Text size="sm">
+                    <Trans>
+                        Are you sure you want to mark all entries of <Code>{sourceLabel}</Code> as read?
+                    </Trans>
+                </Text>
+            ),
+            labels: { confirm: t`Confirm`, cancel: t`Cancel` },
+            confirmProps: { color: "red" },
+            onConfirm: () =>
+                dispatch(
+                    markAllEntries({
+                        sourceType: source.type,
+                        req: {
+                            id: source.id,
+                            read: true,
+                            olderThan: entriesTimestamp,
+                        },
+                    })
+                ),
+        })
+
+    if (!settings) return <Loader />
+    return (
+        <Center>
+            <Group>
+                <ActionButton icon={<TbRefresh size={iconSize} />} label={t`Refresh`} onClick={() => dispatch(reloadEntries())} />
+                <ActionButton icon={<TbChecks size={iconSize} />} label={t`Mark all as read`} onClick={openMarkAllEntriesModal} />
+
+                <HeaderDivider />
+
+                <ActionButton
+                    icon={settings.readingMode === "all" ? <TbEye size={iconSize} /> : <TbEyeOff size={iconSize} />}
+                    label={settings.readingMode === "all" ? t`All` : t`Unread`}
+                    onClick={() => dispatch(changeReadingMode(settings.readingMode === "all" ? "unread" : "all"))}
+                />
+                <ActionButton
+                    icon={settings.readingOrder === "asc" ? <TbArrowUp size={iconSize} /> : <TbArrowDown size={iconSize} />}
+                    label={settings.readingOrder === "asc" ? t`Asc` : t`Desc`}
+                    onClick={() => dispatch(changeReadingOrder(settings.readingOrder === "asc" ? "desc" : "asc"))}
+                />
+
+                <HeaderDivider />
+
+                <ProfileMenu control={<ActionButton icon={<TbUser size={iconSize} />} label={profile?.name} />} />
+            </Group>
+        </Center>
+    )
+}

commafeed-client/src/components/header/ProfileMenu.tsx

@@ -0,0 +1,65 @@
+import { Trans } from "@lingui/macro"
+import { Divider, Menu, useMantineColorScheme } from "@mantine/core"
+import { redirectToAdminUsers, redirectToSettings } from "app/slices/redirect"
+import { useAppDispatch, useAppSelector } from "app/store"
+import { useState } from "react"
+import { TbMoon, TbPower, TbSettings, TbSun, TbUsers } from "react-icons/tb"
+
+interface ProfileMenuProps {
+    control: React.ReactElement
+}
+
+export function ProfileMenu(props: ProfileMenuProps) {
+    const [opened, setOpened] = useState(false)
+    const admin = useAppSelector(state => state.user.profile?.admin)
+    const dispatch = useAppDispatch()
+    const { colorScheme, toggleColorScheme } = useMantineColorScheme()
+    const dark = colorScheme === "dark"
+
+    const logout = () => {
+        window.location.href = "logout"
+    }
+
+    return (
+        <Menu position="bottom-end" closeOnItemClick={false} opened={opened} onChange={setOpened}>
+            <Menu.Target>{props.control}</Menu.Target>
+            <Menu.Dropdown>
+                <Menu.Item
+                    icon={<TbSettings />}
+                    onClick={() => {
+                        dispatch(redirectToSettings())
+                        setOpened(false)
+                    }}
+                >
+                    <Trans>Settings</Trans>
+                </Menu.Item>
+                <Menu.Item icon={dark ? <TbMoon /> : <TbSun />} onClick={() => toggleColorScheme()}>
+                    <Trans>Theme</Trans>
+                </Menu.Item>
+
+                {admin && (
+                    <>
+                        <Divider />
+                        <Menu.Label>
+                            <Trans>Admin</Trans>
+                        </Menu.Label>
+                        <Menu.Item
+                            icon={<TbUsers />}
+                            onClick={() => {
+                                dispatch(redirectToAdminUsers())
+                                setOpened(false)
+                            }}
+                        >
+                            <Trans>Manage users</Trans>
+                        </Menu.Item>
+                    </>
+                )}
+
+                <Divider />
+                <Menu.Item icon={<TbPower />} onClick={logout}>
+                    <Trans>Logout</Trans>
+                </Menu.Item>
+            </Menu.Dropdown>
+        </Menu>
+    )
+}

commafeed-client/src/components/responsive/OnDesktop.tsx

@@ -0,0 +1,11 @@
+import { Box, MediaQuery } from "@mantine/core"
+import { Constants } from "app/constants"
+import React from "react"
+
+export function OnDesktop(props: { children: React.ReactNode }) {
+    return (
+        <MediaQuery smallerThan={Constants.layout.mobileBreakpoint} styles={{ display: "none" }}>
+            <Box>{props.children}</Box>
+        </MediaQuery>
+    )
+}

commafeed-client/src/components/responsive/OnMobile.tsx

@@ -0,0 +1,11 @@
+import { Box, MediaQuery } from "@mantine/core"
+import { Constants } from "app/constants"
+import React from "react"
+
+export function OnMobile(props: { children: React.ReactNode }) {
+    return (
+        <MediaQuery largerThan={Constants.layout.mobileBreakpoint} styles={{ display: "none" }}>
+            <Box>{props.children}</Box>
+        </MediaQuery>
+    )
+}

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

@@ -0,0 +1,31 @@
+import { t } from "@lingui/macro"
+import { Select, Stack, Switch } from "@mantine/core"
+import { changeLanguage, changeScrollSpeed } from "app/slices/user"
+import { useAppDispatch, useAppSelector } from "app/store"
+import { locales } from "i18n"
+
+export function DisplaySettings() {
+    const language = useAppSelector(state => state.user.settings?.language)
+    const scrollSpeed = useAppSelector(state => state.user.settings?.scrollSpeed)
+    const dispatch = useAppDispatch()
+
+    return (
+        <Stack>
+            <Select
+                description={t`Language`}
+                value={language}
+                data={locales.map(l => ({
+                    value: l.key,
+                    label: l.label,
+                }))}
+                onChange={s => s && dispatch(changeLanguage(s))}
+            />
+
+            <Switch
+                label={t`Scroll smoothly when navigating between entries`}
+                checked={scrollSpeed ? scrollSpeed > 0 : false}
+                onChange={e => dispatch(changeScrollSpeed(e.currentTarget.checked))}
+            />
+        </Stack>
+    )
+}

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

@@ -0,0 +1,125 @@
+import { t, Trans } from "@lingui/macro"
+import { Anchor, Box, Button, Checkbox, Divider, Group, Input, PasswordInput, Stack, Text, TextInput } from "@mantine/core"
+import { useForm } from "@mantine/form"
+import { openConfirmModal } from "@mantine/modals"
+import { client, errorsToStrings } from "app/client"
+import { redirectToLogin, redirectToSelectedSource } from "app/slices/redirect"
+import { reloadProfile } from "app/slices/user"
+import { useAppDispatch, useAppSelector } from "app/store"
+import { ProfileModificationRequest } from "app/types"
+import { Alert } from "components/Alert"
+import { useEffect } from "react"
+import { TbDeviceFloppy, TbTrash } from "react-icons/tb"
+import useMutation from "use-mutation"
+
+interface FormData extends ProfileModificationRequest {
+    newPasswordConfirmation?: string
+}
+
+export function ProfileSettings() {
+    const profile = useAppSelector(state => state.user.profile)
+    const dispatch = useAppDispatch()
+
+    const form = useForm<FormData>({
+        validate: {
+            newPasswordConfirmation: (value: string, values: FormData) => (value !== values.newPassword ? t`Passwords do not match` : null),
+        },
+    })
+    const { setValues } = form
+
+    const [saveProfile, saveProfileResult] = useMutation(client.user.saveProfile, {
+        onSuccess: () => {
+            dispatch(reloadProfile())
+            dispatch(redirectToSelectedSource())
+        },
+    })
+    const [deleteProfile, deleteProfileResult] = useMutation(client.user.deleteProfile, {
+        onSuccess: () => {
+            dispatch(redirectToLogin())
+        },
+    })
+    const errors = errorsToStrings([saveProfileResult.error, deleteProfileResult.error])
+
+    const openDeleteProfileModal = () =>
+        openConfirmModal({
+            title: t`Delete account`,
+            children: (
+                <Text size="sm">
+                    <Trans>Are you sure you want to delete your account? There's no turning back!</Trans>
+                </Text>
+            ),
+            labels: { confirm: t`Confirm`, cancel: t`Cancel` },
+            confirmProps: { color: "red" },
+            onConfirm: () => deleteProfile({}),
+        })
+
+    useEffect(() => {
+        if (!profile) return
+        setValues({
+            currentPassword: "",
+            email: profile.email ?? "",
+            newApiKey: false,
+        })
+    }, [setValues, profile])
+
+    return (
+        <>
+            {errors.length > 0 && (
+                <Box mb="md">
+                    <Alert messages={errors} />
+                </Box>
+            )}
+
+            <form onSubmit={form.onSubmit(saveProfile)}>
+                <Stack>
+                    <Input.Wrapper label={t`User name`}>
+                        <Box>{profile?.name}</Box>
+                    </Input.Wrapper>
+                    <Input.Wrapper
+                        label={t`OPML export`}
+                        description={t`Export your subscriptions and categories as an OPML file that can be imported in other feed reading services`}
+                    >
+                        <Box>
+                            <Anchor href="rest/feed/export" download="commafeed_opml.xml">
+                                <Trans>Download</Trans>
+                            </Anchor>
+                        </Box>
+                    </Input.Wrapper>
+                    <PasswordInput
+                        label={t`Current password`}
+                        description={t`Enter your current password to change profile settings`}
+                        required
+                        {...form.getInputProps("currentPassword")}
+                    />
+                    <TextInput type="email" label={t`E-mail`} {...form.getInputProps("email")} required />
+                    <PasswordInput
+                        label={t`New password`}
+                        description={t`Changing password will generate a new API key`}
+                        {...form.getInputProps("newPassword")}
+                    />
+                    <PasswordInput label={t`Confirm password`} {...form.getInputProps("newPasswordConfirmation")} />
+                    <TextInput label={t`API key`} readOnly value={profile?.apiKey} />
+                    <Checkbox label={t`Generate new API key`} {...form.getInputProps("newApiKey", { type: "checkbox" })} />
+
+                    <Group>
+                        <Button variant="default" onClick={() => dispatch(redirectToSelectedSource())}>
+                            <Trans>Cancel</Trans>
+                        </Button>
+                        <Button type="submit" leftIcon={<TbDeviceFloppy size={16} />} loading={saveProfileResult.status === "running"}>
+                            <Trans>Save</Trans>
+                        </Button>
+                        <Divider orientation="vertical" />
+                        <Button
+                            color="red"
+                            leftIcon={<TbTrash size={16} />}
+                            onClick={() => openDeleteProfileModal()}
+                            loading={deleteProfileResult.status === "running"}
+                        >
+                            <Trans>Delete account</Trans>
+                        </Button>
+                    </Group>
+                </Stack>
+            </form>
+        </>
+    )
+}

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

@@ -0,0 +1,118 @@
+import { t } from "@lingui/macro"
+import { Box, Stack } from "@mantine/core"
+import { Constants } from "app/constants"
+import { redirectToCategory, redirectToCategoryDetails, redirectToFeed, redirectToFeedDetails } from "app/slices/redirect"
+import { collapseTreeCategory } from "app/slices/tree"
+import { useAppDispatch, useAppSelector } from "app/store"
+import { Category, Subscription } from "app/types"
+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 { TreeNode } from "./TreeNode"
+import { TreeSearch } from "./TreeSearch"
+
+const allIcon = <FaInbox size={14} />
+const expandedIcon = <FaChevronDown size={14} />
+const collapsedIcon = <FaChevronRight size={14} />
+
+const errorThreshold = 9
+export function Tree() {
+    const root = useAppSelector(state => state.tree.rootCategory)
+    const source = useAppSelector(state => state.entries.source)
+    const dispatch = useAppDispatch()
+
+    const feedClicked = (e: React.MouseEvent, id: string) => {
+        if (e.detail === 2) dispatch(redirectToFeedDetails(id))
+        else dispatch(redirectToFeed(id))
+    }
+    const categoryClicked = (e: React.MouseEvent, id: string) => {
+        if (e.detail === 2) {
+            if (id === Constants.categoryIds.all) return
+            dispatch(redirectToCategoryDetails(id))
+        } else {
+            dispatch(redirectToCategory(id))
+        }
+    }
+    const categoryIconClicked = (e: React.MouseEvent, category: Category) => {
+        e.stopPropagation()
+
+        dispatch(
+            collapseTreeCategory({
+                id: +category.id,
+                collapse: category.expanded,
+            })
+        )
+    }
+
+    const allCategoryNode = () => (
+        <TreeNode
+            id={Constants.categoryIds.all}
+            name={t`All`}
+            icon={allIcon}
+            unread={categoryUnreadCount(root)}
+            selected={source.type === "category" && source.id === Constants.categoryIds.all}
+            expanded={false}
+            level={0}
+            hasError={false}
+            onClick={categoryClicked}
+        />
+    )
+
+    const categoryNode = (category: Category, level: number = 0) => {
+        const hasError = !category.expanded && flattenCategoryTree(category).some(c => c.feeds.some(f => f.errorCount > errorThreshold))
+        return (
+            <TreeNode
+                id={category.id}
+                name={category.name}
+                icon={category.expanded ? expandedIcon : collapsedIcon}
+                unread={categoryUnreadCount(category)}
+                selected={source.type === "category" && source.id === category.id}
+                expanded={category.expanded}
+                level={level}
+                hasError={hasError}
+                onClick={categoryClicked}
+                onIconClick={e => categoryIconClicked(e, category)}
+                key={category.id}
+            />
+        )
+    }
+
+    const feedNode = (feed: Subscription, level: number = 0) => (
+        <TreeNode
+            id={String(feed.id)}
+            name={feed.name}
+            icon={feed.iconUrl}
+            unread={feed.unread}
+            selected={source.type === "feed" && source.id === String(feed.id)}
+            level={level}
+            hasError={feed.errorCount > errorThreshold}
+            onClick={feedClicked}
+            key={feed.id}
+        />
+    )
+
+    const recursiveCategoryNode = (category: Category, level: number = 0) => (
+        <React.Fragment key={`recursiveCategoryNode-${category.id}`}>
+            {categoryNode(category, level)}
+            {category.expanded && category.children.map(c => recursiveCategoryNode(c, level + 1))}
+            {category.expanded && category.feeds.map(f => feedNode(f, level + 1))}
+        </React.Fragment>
+    )
+
+    if (!root) return <Loader />
+    const feeds = flattenCategoryTree(root).flatMap(c => c.feeds)
+    return (
+        <Stack>
+            <OnDesktop>
+                <TreeSearch feeds={feeds} />
+            </OnDesktop>
+            <Box>
+                {allCategoryNode()}
+                {root.children.map(c => recursiveCategoryNode(c))}
+                {root.feeds.map(f => feedNode(f))}
+            </Box>
+        </Stack>
+    )
+}

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

@@ -0,0 +1,62 @@
+import { Box, createStyles, Image } from "@mantine/core"
+import React, { ReactNode } from "react"
+import { UnreadCount } from "./UnreadCount"
+
+interface TreeNodeProps {
+    id: string
+    name: string
+    icon: ReactNode | string
+    unread: number
+    selected: boolean
+    expanded?: boolean
+    level: number
+    hasError: boolean
+    onClick: (e: React.MouseEvent, id: string) => void
+    onIconClick?: (e: React.MouseEvent, id: string) => void
+}
+
+const useStyles = createStyles((theme, props: TreeNodeProps) => {
+    let backgroundColor = "inherit"
+    if (props.selected) backgroundColor = theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]
+
+    let color
+    if (props.hasError) color = theme.colors.red[6]
+    else if (theme.colorScheme === "dark") color = props.unread > 0 ? theme.colors.dark[0] : theme.colors.dark[3]
+    else color = props.unread > 0 ? theme.black : theme.colors.gray[6]
+
+    return {
+        node: {
+            display: "flex",
+            alignItems: "center",
+            cursor: "pointer",
+            color,
+            backgroundColor,
+            "&:hover": {
+                backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0],
+            },
+        },
+        nodeText: {
+            flexGrow: 1,
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+        },
+    }
+})
+
+export function TreeNode(props: TreeNodeProps) {
+    const { classes } = useStyles(props)
+    return (
+        <Box py={1} pl={props.level * 20} className={classes.node} onClick={(e: React.MouseEvent) => props.onClick(e, props.id)}>
+            <Box mr={6} onClick={(e: React.MouseEvent) => props.onIconClick && props.onIconClick(e, props.id)}>
+                {typeof props.icon === "string" ? <Image src={props.icon} alt="" width={18} height={18} /> : props.icon}
+            </Box>
+            <Box className={classes.nodeText}>{props.name}</Box>
+            {!props.expanded && (
+                <Box>
+                    <UnreadCount unreadCount={props.unread} />
+                </Box>
+            )}
+        </Box>
+    )
+}

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

@@ -0,0 +1,60 @@
+import { t } from "@lingui/macro"
+import { Box, Center, Image, Kbd, TextInput } from "@mantine/core"
+import { openSpotlight, SpotlightAction, SpotlightProvider } from "@mantine/spotlight"
+import { redirectToFeed } from "app/slices/redirect"
+import { useAppDispatch } from "app/store"
+import { Subscription } from "app/types"
+import { useMousetrap } from "hooks/useMousetrap"
+import { TbSearch } from "react-icons/tb"
+
+export interface TreeSearchProps {
+    feeds: Subscription[]
+}
+export function TreeSearch(props: TreeSearchProps) {
+    const dispatch = useAppDispatch()
+
+    const actions: SpotlightAction[] = props.feeds
+        .sort((f1, f2) => f1.name.localeCompare(f2.name))
+        .map(f => ({
+            title: f.name,
+            icon: <Image src={f.iconUrl} alt="" width={18} height={18} />,
+            onTrigger: () => dispatch(redirectToFeed(f.id)),
+        }))
+
+    const searchIcon = <TbSearch size={18} />
+    const rightSection = (
+        <Center>
+            <Kbd>Ctrl</Kbd>
+            <Box mx={5}>+</Box>
+            <Kbd>K</Kbd>
+        </Center>
+    )
+
+    // additional keyboard shortcut used by commafeed v1
+    useMousetrap("g u", () => openSpotlight())
+
+    return (
+        <SpotlightProvider
+            actions={actions}
+            searchIcon={searchIcon}
+            searchPlaceholder={t`Search`}
+            shortcut="ctrl+k"
+            nothingFoundMessage={t`Nothing found`}
+        >
+            <TextInput
+                placeholder={t`Search`}
+                icon={searchIcon}
+                rightSectionWidth={100}
+                rightSection={rightSection}
+                styles={{
+                    input: { cursor: "pointer" },
+                    rightSection: { pointerEvents: "none" },
+                }}
+                onClick={() => openSpotlight()}
+                // prevent focus
+                onFocus={e => e.target.blur()}
+                readOnly
+            />
+        </SpotlightProvider>
+    )
+}

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

@@ -0,0 +1,18 @@
+import { Badge, createStyles } from "@mantine/core"
+
+const useStyles = createStyles(() => ({
+    badge: {
+        width: "3.2rem",
+        // for some reason, mantine Badge has "cursor: 'default'"
+        cursor: "pointer",
+    },
+}))
+
+export function UnreadCount(props: { unreadCount: number }) {
+    const { classes } = useStyles()
+
+    if (props.unreadCount <= 0) return null
+
+    const count = props.unreadCount >= 1000 ? "999+" : props.unreadCount
+    return <Badge className={classes.badge}>{count}</Badge>
+}