forked from Archives/Athou_commafeed
replace complex eslint config with biome
This commit is contained in:
Athou
@@ -1,175 +1,175 @@
|
||||
import { Trans } from "@lingui/macro"
|
||||
import { Box, Stack } from "@mantine/core"
|
||||
import { Constants } from "app/constants"
|
||||
import {
|
||||
redirectToCategory,
|
||||
redirectToCategoryDetails,
|
||||
redirectToFeed,
|
||||
redirectToFeedDetails,
|
||||
redirectToTag,
|
||||
redirectToTagDetails,
|
||||
} from "app/redirect/thunks"
|
||||
import { useAppDispatch, useAppSelector } from "app/store"
|
||||
import { collapseTreeCategory } from "app/tree/thunks"
|
||||
import { type Category, type 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 { TbChevronDown, TbChevronRight, TbInbox, TbStar, TbTag } from "react-icons/tb"
|
||||
import { TreeNode } from "./TreeNode"
|
||||
import { TreeSearch } from "./TreeSearch"
|
||||
|
||||
const allIcon = <TbInbox size={16} />
|
||||
const starredIcon = <TbStar size={16} />
|
||||
const tagIcon = <TbTag size={16} />
|
||||
const expandedIcon = <TbChevronDown size={16} />
|
||||
const collapsedIcon = <TbChevronRight size={16} />
|
||||
|
||||
const errorThreshold = 9
|
||||
|
||||
export function Tree() {
|
||||
const root = useAppSelector(state => state.tree.rootCategory)
|
||||
const source = useAppSelector(state => state.entries.source)
|
||||
const tags = useAppSelector(state => state.user.tags)
|
||||
const showRead = useAppSelector(state => state.user.settings?.showRead)
|
||||
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) {
|
||||
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 tagClicked = (e: React.MouseEvent, id: string) => {
|
||||
if (e.detail === 2) {
|
||||
dispatch(redirectToTagDetails(id))
|
||||
} else {
|
||||
dispatch(redirectToTag(id))
|
||||
}
|
||||
}
|
||||
|
||||
const allCategoryNode = () => (
|
||||
<TreeNode
|
||||
id={Constants.categories.all.id}
|
||||
name={<Trans>All</Trans>}
|
||||
icon={allIcon}
|
||||
unread={categoryUnreadCount(root)}
|
||||
selected={source.type === "category" && source.id === Constants.categories.all.id}
|
||||
expanded={false}
|
||||
level={0}
|
||||
hasError={false}
|
||||
onClick={categoryClicked}
|
||||
/>
|
||||
)
|
||||
const starredCategoryNode = () => (
|
||||
<TreeNode
|
||||
id={Constants.categories.starred.id}
|
||||
name={<Trans>Starred</Trans>}
|
||||
icon={starredIcon}
|
||||
unread={0}
|
||||
selected={source.type === "category" && source.id === Constants.categories.starred.id}
|
||||
expanded={false}
|
||||
level={0}
|
||||
hasError={false}
|
||||
onClick={categoryClicked}
|
||||
/>
|
||||
)
|
||||
|
||||
const categoryNode = (category: Category, level = 0) => {
|
||||
const unreadCount = categoryUnreadCount(category)
|
||||
if (unreadCount === 0 && !showRead) return null
|
||||
|
||||
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={unreadCount}
|
||||
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 = 0) => {
|
||||
if (feed.unread === 0 && !showRead) return null
|
||||
|
||||
return (
|
||||
<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 tagNode = (tag: string) => (
|
||||
<TreeNode
|
||||
id={tag}
|
||||
name={tag}
|
||||
icon={tagIcon}
|
||||
unread={0}
|
||||
selected={source.type === "tag" && source.id === tag}
|
||||
level={0}
|
||||
hasError={false}
|
||||
onClick={tagClicked}
|
||||
key={tag}
|
||||
/>
|
||||
)
|
||||
|
||||
const recursiveCategoryNode = (category: Category, level = 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()}
|
||||
{starredCategoryNode()}
|
||||
{root.children.map(c => recursiveCategoryNode(c))}
|
||||
{root.feeds.map(f => feedNode(f))}
|
||||
{tags?.map(tag => tagNode(tag))}
|
||||
</Box>
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
import { Trans } from "@lingui/macro"
|
||||
import { Box, Stack } from "@mantine/core"
|
||||
import { Constants } from "app/constants"
|
||||
import {
|
||||
redirectToCategory,
|
||||
redirectToCategoryDetails,
|
||||
redirectToFeed,
|
||||
redirectToFeedDetails,
|
||||
redirectToTag,
|
||||
redirectToTagDetails,
|
||||
} from "app/redirect/thunks"
|
||||
import { useAppDispatch, useAppSelector } from "app/store"
|
||||
import { collapseTreeCategory } from "app/tree/thunks"
|
||||
import type { 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 { TbChevronDown, TbChevronRight, TbInbox, TbStar, TbTag } from "react-icons/tb"
|
||||
import { TreeNode } from "./TreeNode"
|
||||
import { TreeSearch } from "./TreeSearch"
|
||||
|
||||
const allIcon = <TbInbox size={16} />
|
||||
const starredIcon = <TbStar size={16} />
|
||||
const tagIcon = <TbTag size={16} />
|
||||
const expandedIcon = <TbChevronDown size={16} />
|
||||
const collapsedIcon = <TbChevronRight size={16} />
|
||||
|
||||
const errorThreshold = 9
|
||||
|
||||
export function Tree() {
|
||||
const root = useAppSelector(state => state.tree.rootCategory)
|
||||
const source = useAppSelector(state => state.entries.source)
|
||||
const tags = useAppSelector(state => state.user.tags)
|
||||
const showRead = useAppSelector(state => state.user.settings?.showRead)
|
||||
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) {
|
||||
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 tagClicked = (e: React.MouseEvent, id: string) => {
|
||||
if (e.detail === 2) {
|
||||
dispatch(redirectToTagDetails(id))
|
||||
} else {
|
||||
dispatch(redirectToTag(id))
|
||||
}
|
||||
}
|
||||
|
||||
const allCategoryNode = () => (
|
||||
<TreeNode
|
||||
id={Constants.categories.all.id}
|
||||
name={<Trans>All</Trans>}
|
||||
icon={allIcon}
|
||||
unread={categoryUnreadCount(root)}
|
||||
selected={source.type === "category" && source.id === Constants.categories.all.id}
|
||||
expanded={false}
|
||||
level={0}
|
||||
hasError={false}
|
||||
onClick={categoryClicked}
|
||||
/>
|
||||
)
|
||||
const starredCategoryNode = () => (
|
||||
<TreeNode
|
||||
id={Constants.categories.starred.id}
|
||||
name={<Trans>Starred</Trans>}
|
||||
icon={starredIcon}
|
||||
unread={0}
|
||||
selected={source.type === "category" && source.id === Constants.categories.starred.id}
|
||||
expanded={false}
|
||||
level={0}
|
||||
hasError={false}
|
||||
onClick={categoryClicked}
|
||||
/>
|
||||
)
|
||||
|
||||
const categoryNode = (category: Category, level = 0) => {
|
||||
const unreadCount = categoryUnreadCount(category)
|
||||
if (unreadCount === 0 && !showRead) return null
|
||||
|
||||
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={unreadCount}
|
||||
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 = 0) => {
|
||||
if (feed.unread === 0 && !showRead) return null
|
||||
|
||||
return (
|
||||
<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 tagNode = (tag: string) => (
|
||||
<TreeNode
|
||||
id={tag}
|
||||
name={tag}
|
||||
icon={tagIcon}
|
||||
unread={0}
|
||||
selected={source.type === "tag" && source.id === tag}
|
||||
level={0}
|
||||
hasError={false}
|
||||
onClick={tagClicked}
|
||||
key={tag}
|
||||
/>
|
||||
)
|
||||
|
||||
const recursiveCategoryNode = (category: Category, level = 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()}
|
||||
{starredCategoryNode()}
|
||||
{root.children.map(c => recursiveCategoryNode(c))}
|
||||
{root.feeds.map(f => feedNode(f))}
|
||||
{tags?.map(tag => tagNode(tag))}
|
||||
</Box>
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,78 +1,78 @@
|
||||
import { Box, Center } from "@mantine/core"
|
||||
import { FeedFavicon } from "components/content/FeedFavicon"
|
||||
import React, { type ReactNode } from "react"
|
||||
import { tss } from "tss"
|
||||
import { UnreadCount } from "./UnreadCount"
|
||||
|
||||
interface TreeNodeProps {
|
||||
id: string
|
||||
name: ReactNode
|
||||
icon: ReactNode
|
||||
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 = tss
|
||||
.withParams<{
|
||||
selected: boolean
|
||||
hasError: boolean
|
||||
hasUnread: boolean
|
||||
}>()
|
||||
.create(({ theme, colorScheme, selected, hasError, hasUnread }) => {
|
||||
let backgroundColor = "inherit"
|
||||
if (selected) backgroundColor = colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[1]
|
||||
|
||||
let color
|
||||
if (hasError) {
|
||||
color = theme.colors.red[6]
|
||||
} else if (colorScheme === "dark") {
|
||||
color = hasUnread ? theme.colors.dark[0] : theme.colors.dark[3]
|
||||
} else {
|
||||
color = hasUnread ? theme.black : theme.colors.gray[6]
|
||||
}
|
||||
|
||||
return {
|
||||
node: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
cursor: "pointer",
|
||||
color,
|
||||
backgroundColor,
|
||||
"&:hover": {
|
||||
backgroundColor: 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({
|
||||
selected: props.selected,
|
||||
hasError: props.hasError,
|
||||
hasUnread: props.unread > 0,
|
||||
})
|
||||
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?.(e, props.id)}>
|
||||
<Center>{typeof props.icon === "string" ? <FeedFavicon url={props.icon} /> : props.icon}</Center>
|
||||
</Box>
|
||||
<Box className={classes.nodeText}>{props.name}</Box>
|
||||
{!props.expanded && (
|
||||
<Box>
|
||||
<UnreadCount unreadCount={props.unread} />
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
import { Box, Center } from "@mantine/core"
|
||||
import { FeedFavicon } from "components/content/FeedFavicon"
|
||||
import type React from "react"
|
||||
import { tss } from "tss"
|
||||
import { UnreadCount } from "./UnreadCount"
|
||||
|
||||
interface TreeNodeProps {
|
||||
id: string
|
||||
name: React.ReactNode
|
||||
icon: React.ReactNode
|
||||
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 = tss
|
||||
.withParams<{
|
||||
selected: boolean
|
||||
hasError: boolean
|
||||
hasUnread: boolean
|
||||
}>()
|
||||
.create(({ theme, colorScheme, selected, hasError, hasUnread }) => {
|
||||
let backgroundColor = "inherit"
|
||||
if (selected) backgroundColor = colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[1]
|
||||
|
||||
let color: string
|
||||
if (hasError) {
|
||||
color = theme.colors.red[6]
|
||||
} else if (colorScheme === "dark") {
|
||||
color = hasUnread ? theme.colors.dark[0] : theme.colors.dark[3]
|
||||
} else {
|
||||
color = hasUnread ? theme.black : theme.colors.gray[6]
|
||||
}
|
||||
|
||||
return {
|
||||
node: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
cursor: "pointer",
|
||||
color,
|
||||
backgroundColor,
|
||||
"&:hover": {
|
||||
backgroundColor: 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({
|
||||
selected: props.selected,
|
||||
hasError: props.hasError,
|
||||
hasUnread: props.unread > 0,
|
||||
})
|
||||
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?.(e, props.id)}>
|
||||
<Center>{typeof props.icon === "string" ? <FeedFavicon url={props.icon} /> : props.icon}</Center>
|
||||
</Box>
|
||||
<Box className={classes.nodeText}>{props.name}</Box>
|
||||
{!props.expanded && (
|
||||
<Box>
|
||||
<UnreadCount unreadCount={props.unread} />
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,69 +1,69 @@
|
||||
import { t, Trans } from "@lingui/macro"
|
||||
import { Box, Center, Kbd, TextInput } from "@mantine/core"
|
||||
import { useOs } from "@mantine/hooks"
|
||||
import { Spotlight, spotlight, type SpotlightActionData } from "@mantine/spotlight"
|
||||
import { redirectToFeed } from "app/redirect/thunks"
|
||||
import { useAppDispatch } from "app/store"
|
||||
import { type Subscription } from "app/types"
|
||||
import { FeedFavicon } from "components/content/FeedFavicon"
|
||||
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 isMacOS = useOs() === "macos"
|
||||
const actions: SpotlightActionData[] = props.feeds
|
||||
.map(f => ({
|
||||
id: `${f.id}`,
|
||||
label: f.name,
|
||||
leftSection: <FeedFavicon url={f.iconUrl} />,
|
||||
onClick: async () => await dispatch(redirectToFeed(f.id)),
|
||||
}))
|
||||
.sort((f1, f2) => f1.label.localeCompare(f2.label))
|
||||
|
||||
const searchIcon = <TbSearch size={18} />
|
||||
const rightSection = (
|
||||
<Center style={{ cursor: "pointer" }} onClick={() => spotlight.open()}>
|
||||
<Kbd>{isMacOS ? "Cmd" : "Ctrl"}</Kbd>
|
||||
<Box mx={5}>+</Box>
|
||||
<Kbd>K</Kbd>
|
||||
</Center>
|
||||
)
|
||||
|
||||
// additional keyboard shortcut used by commafeed v1
|
||||
useMousetrap("g u", () => spotlight.open())
|
||||
|
||||
return (
|
||||
<>
|
||||
<TextInput
|
||||
placeholder={t`Search`}
|
||||
leftSection={searchIcon}
|
||||
rightSectionWidth={100}
|
||||
rightSection={rightSection}
|
||||
styles={{
|
||||
input: {
|
||||
cursor: "pointer",
|
||||
},
|
||||
}}
|
||||
onClick={() => spotlight.open()}
|
||||
// prevent focus
|
||||
onFocus={e => e.target.blur()}
|
||||
readOnly
|
||||
/>
|
||||
<Spotlight
|
||||
actions={actions}
|
||||
limit={10}
|
||||
shortcut="mod+k"
|
||||
searchProps={{
|
||||
leftSection: searchIcon,
|
||||
placeholder: t`Search`,
|
||||
}}
|
||||
nothingFound={<Trans>Nothing found</Trans>}
|
||||
></Spotlight>
|
||||
</>
|
||||
)
|
||||
}
|
||||
import { Trans, t } from "@lingui/macro"
|
||||
import { Box, Center, Kbd, TextInput } from "@mantine/core"
|
||||
import { useOs } from "@mantine/hooks"
|
||||
import { Spotlight, type SpotlightActionData, spotlight } from "@mantine/spotlight"
|
||||
import { redirectToFeed } from "app/redirect/thunks"
|
||||
import { useAppDispatch } from "app/store"
|
||||
import type { Subscription } from "app/types"
|
||||
import { FeedFavicon } from "components/content/FeedFavicon"
|
||||
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 isMacOS = useOs() === "macos"
|
||||
const actions: SpotlightActionData[] = props.feeds
|
||||
.map(f => ({
|
||||
id: `${f.id}`,
|
||||
label: f.name,
|
||||
leftSection: <FeedFavicon url={f.iconUrl} />,
|
||||
onClick: async () => await dispatch(redirectToFeed(f.id)),
|
||||
}))
|
||||
.sort((f1, f2) => f1.label.localeCompare(f2.label))
|
||||
|
||||
const searchIcon = <TbSearch size={18} />
|
||||
const rightSection = (
|
||||
<Center style={{ cursor: "pointer" }} onClick={() => spotlight.open()}>
|
||||
<Kbd>{isMacOS ? "Cmd" : "Ctrl"}</Kbd>
|
||||
<Box mx={5}>+</Box>
|
||||
<Kbd>K</Kbd>
|
||||
</Center>
|
||||
)
|
||||
|
||||
// additional keyboard shortcut used by commafeed v1
|
||||
useMousetrap("g u", () => spotlight.open())
|
||||
|
||||
return (
|
||||
<>
|
||||
<TextInput
|
||||
placeholder={t`Search`}
|
||||
leftSection={searchIcon}
|
||||
rightSectionWidth={100}
|
||||
rightSection={rightSection}
|
||||
styles={{
|
||||
input: {
|
||||
cursor: "pointer",
|
||||
},
|
||||
}}
|
||||
onClick={() => spotlight.open()}
|
||||
// prevent focus
|
||||
onFocus={e => e.target.blur()}
|
||||
readOnly
|
||||
/>
|
||||
<Spotlight
|
||||
actions={actions}
|
||||
limit={10}
|
||||
shortcut="mod+k"
|
||||
searchProps={{
|
||||
leftSection: searchIcon,
|
||||
placeholder: t`Search`,
|
||||
}}
|
||||
nothingFound={<Trans>Nothing found</Trans>}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
import { Badge, Tooltip } from "@mantine/core"
|
||||
import { Constants } from "app/constants"
|
||||
import { tss } from "tss"
|
||||
|
||||
const useStyles = tss.create(() => ({
|
||||
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 >= 10000 ? "10k+" : props.unreadCount
|
||||
return (
|
||||
<Tooltip label={props.unreadCount} disabled={props.unreadCount === count} openDelay={Constants.tooltip.delay}>
|
||||
<Badge className={classes.badge} variant="light">
|
||||
{count}
|
||||
</Badge>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
import { Badge, Tooltip } from "@mantine/core"
|
||||
import { Constants } from "app/constants"
|
||||
import { tss } from "tss"
|
||||
|
||||
const useStyles = tss.create(() => ({
|
||||
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 >= 10000 ? "10k+" : props.unreadCount
|
||||
return (
|
||||
<Tooltip label={props.unreadCount} disabled={props.unreadCount === count} openDelay={Constants.tooltip.delay}>
|
||||
<Badge className={classes.badge} variant="light">
|
||||
{count}
|
||||
</Badge>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user