forked from Archives/Athou_commafeed
replace complex eslint config with biome
This commit is contained in:
Athou
@@ -1,11 +1,11 @@
|
||||
import { TypographyStylesProvider } from "@mantine/core"
|
||||
import { type ReactNode } from "react"
|
||||
|
||||
/**
|
||||
* This component is used to provide basic styles to html typography elements.
|
||||
*
|
||||
* see https://mantine.dev/core/typography-styles-provider/
|
||||
*/
|
||||
export const BasicHtmlStyles = (props: { children: ReactNode }) => {
|
||||
return <TypographyStylesProvider pl={0}>{props.children}</TypographyStylesProvider>
|
||||
}
|
||||
import { TypographyStylesProvider } from "@mantine/core"
|
||||
import type { ReactNode } from "react"
|
||||
|
||||
/**
|
||||
* This component is used to provide basic styles to html typography elements.
|
||||
*
|
||||
* see https://mantine.dev/core/typography-styles-provider/
|
||||
*/
|
||||
export const BasicHtmlStyles = (props: { children: ReactNode }) => {
|
||||
return <TypographyStylesProvider pl={0}>{props.children}</TypographyStylesProvider>
|
||||
}
|
||||
|
||||
@@ -1,103 +1,103 @@
|
||||
import { Box, Mark } from "@mantine/core"
|
||||
import { Constants } from "app/constants"
|
||||
import { calculatePlaceholderSize } from "app/utils"
|
||||
import { BasicHtmlStyles } from "components/content/BasicHtmlStyles"
|
||||
import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
|
||||
import escapeStringRegexp from "escape-string-regexp"
|
||||
import { type ChildrenNode, Interweave, Matcher, type MatchResponse, type Node, type TransformCallback } from "interweave"
|
||||
import React from "react"
|
||||
import { tss } from "tss"
|
||||
|
||||
export interface ContentProps {
|
||||
content: string
|
||||
highlight?: string
|
||||
}
|
||||
|
||||
const useStyles = tss.create(() => ({
|
||||
content: {
|
||||
// break long links or long words
|
||||
overflowWrap: "anywhere",
|
||||
"& a": {
|
||||
color: "inherit",
|
||||
textDecoration: "underline",
|
||||
},
|
||||
"& iframe": {
|
||||
maxWidth: "100%",
|
||||
},
|
||||
"& pre, & code": {
|
||||
whiteSpace: "pre-wrap",
|
||||
},
|
||||
},
|
||||
}))
|
||||
|
||||
const transform: TransformCallback = node => {
|
||||
if (node.tagName === "IMG") {
|
||||
// show placeholders for loading img tags, this allows the entry to have its final height immediately
|
||||
const src = node.getAttribute("src") ?? undefined
|
||||
if (!src) return undefined
|
||||
|
||||
const alt = node.getAttribute("alt") ?? "image"
|
||||
const title = node.getAttribute("title") ?? undefined
|
||||
const nodeWidth = node.getAttribute("width")
|
||||
const nodeHeight = node.getAttribute("height")
|
||||
const width = nodeWidth ? parseInt(nodeWidth, 10) : undefined
|
||||
const height = nodeHeight ? parseInt(nodeHeight, 10) : undefined
|
||||
const placeholderSize = calculatePlaceholderSize({
|
||||
width,
|
||||
height,
|
||||
maxWidth: Constants.layout.entryMaxWidth,
|
||||
})
|
||||
|
||||
return (
|
||||
<ImageWithPlaceholderWhileLoading
|
||||
src={src}
|
||||
alt={alt}
|
||||
title={title}
|
||||
width={width}
|
||||
height="auto"
|
||||
placeholderWidth={placeholderSize.width}
|
||||
placeholderHeight={placeholderSize.height}
|
||||
/>
|
||||
)
|
||||
}
|
||||
return undefined
|
||||
}
|
||||
|
||||
class HighlightMatcher extends Matcher {
|
||||
private readonly search: string
|
||||
|
||||
constructor(search: string) {
|
||||
super("highlight")
|
||||
this.search = escapeStringRegexp(search)
|
||||
}
|
||||
|
||||
match(string: string): MatchResponse<unknown> | null {
|
||||
const pattern = this.search.split(" ").join("|")
|
||||
return this.doMatch(string, new RegExp(pattern, "i"), () => ({}))
|
||||
}
|
||||
|
||||
replaceWith(children: ChildrenNode): Node {
|
||||
return <Mark>{children}</Mark>
|
||||
}
|
||||
|
||||
asTag(): string {
|
||||
return "span"
|
||||
}
|
||||
}
|
||||
|
||||
// memoize component because Interweave is costly
|
||||
const Content = React.memo((props: ContentProps) => {
|
||||
const { classes } = useStyles()
|
||||
const matchers = props.highlight ? [new HighlightMatcher(props.highlight)] : []
|
||||
|
||||
return (
|
||||
<BasicHtmlStyles>
|
||||
<Box className={classes.content}>
|
||||
<Interweave content={props.content} transform={transform} matchers={matchers} />
|
||||
</Box>
|
||||
</BasicHtmlStyles>
|
||||
)
|
||||
})
|
||||
Content.displayName = "Content"
|
||||
|
||||
export { Content }
|
||||
import { Box, Mark } from "@mantine/core"
|
||||
import { Constants } from "app/constants"
|
||||
import { calculatePlaceholderSize } from "app/utils"
|
||||
import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
|
||||
import { BasicHtmlStyles } from "components/content/BasicHtmlStyles"
|
||||
import escapeStringRegexp from "escape-string-regexp"
|
||||
import { type ChildrenNode, Interweave, type MatchResponse, Matcher, type Node, type TransformCallback } from "interweave"
|
||||
import React from "react"
|
||||
import { tss } from "tss"
|
||||
|
||||
export interface ContentProps {
|
||||
content: string
|
||||
highlight?: string
|
||||
}
|
||||
|
||||
const useStyles = tss.create(() => ({
|
||||
content: {
|
||||
// break long links or long words
|
||||
overflowWrap: "anywhere",
|
||||
"& a": {
|
||||
color: "inherit",
|
||||
textDecoration: "underline",
|
||||
},
|
||||
"& iframe": {
|
||||
maxWidth: "100%",
|
||||
},
|
||||
"& pre, & code": {
|
||||
whiteSpace: "pre-wrap",
|
||||
},
|
||||
},
|
||||
}))
|
||||
|
||||
const transform: TransformCallback = node => {
|
||||
if (node.tagName === "IMG") {
|
||||
// show placeholders for loading img tags, this allows the entry to have its final height immediately
|
||||
const src = node.getAttribute("src") ?? undefined
|
||||
if (!src) return undefined
|
||||
|
||||
const alt = node.getAttribute("alt") ?? "image"
|
||||
const title = node.getAttribute("title") ?? undefined
|
||||
const nodeWidth = node.getAttribute("width")
|
||||
const nodeHeight = node.getAttribute("height")
|
||||
const width = nodeWidth ? Number.parseInt(nodeWidth, 10) : undefined
|
||||
const height = nodeHeight ? Number.parseInt(nodeHeight, 10) : undefined
|
||||
const placeholderSize = calculatePlaceholderSize({
|
||||
width,
|
||||
height,
|
||||
maxWidth: Constants.layout.entryMaxWidth,
|
||||
})
|
||||
|
||||
return (
|
||||
<ImageWithPlaceholderWhileLoading
|
||||
src={src}
|
||||
alt={alt}
|
||||
title={title}
|
||||
width={width}
|
||||
height="auto"
|
||||
placeholderWidth={placeholderSize.width}
|
||||
placeholderHeight={placeholderSize.height}
|
||||
/>
|
||||
)
|
||||
}
|
||||
return undefined
|
||||
}
|
||||
|
||||
class HighlightMatcher extends Matcher {
|
||||
private readonly search: string
|
||||
|
||||
constructor(search: string) {
|
||||
super("highlight")
|
||||
this.search = escapeStringRegexp(search)
|
||||
}
|
||||
|
||||
match(string: string): MatchResponse<unknown> | null {
|
||||
const pattern = this.search.split(" ").join("|")
|
||||
return this.doMatch(string, new RegExp(pattern, "i"), () => ({}))
|
||||
}
|
||||
|
||||
replaceWith(children: ChildrenNode): Node {
|
||||
return <Mark>{children}</Mark>
|
||||
}
|
||||
|
||||
asTag(): string {
|
||||
return "span"
|
||||
}
|
||||
}
|
||||
|
||||
// memoize component because Interweave is costly
|
||||
const Content = React.memo((props: ContentProps) => {
|
||||
const { classes } = useStyles()
|
||||
const matchers = props.highlight ? [new HighlightMatcher(props.highlight)] : []
|
||||
|
||||
return (
|
||||
<BasicHtmlStyles>
|
||||
<Box className={classes.content}>
|
||||
<Interweave content={props.content} transform={transform} matchers={matchers} />
|
||||
</Box>
|
||||
</BasicHtmlStyles>
|
||||
)
|
||||
})
|
||||
Content.displayName = "Content"
|
||||
|
||||
export { Content }
|
||||
|
||||
@@ -1,24 +1,29 @@
|
||||
import { BasicHtmlStyles } from "components/content/BasicHtmlStyles"
|
||||
import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
|
||||
|
||||
export function Enclosure(props: { enclosureType: string; enclosureUrl: string }) {
|
||||
const hasVideo = props.enclosureType.startsWith("video")
|
||||
const hasAudio = props.enclosureType.startsWith("audio")
|
||||
const hasImage = props.enclosureType.startsWith("image")
|
||||
|
||||
return (
|
||||
<BasicHtmlStyles>
|
||||
{hasVideo && (
|
||||
<video controls width="100%">
|
||||
<source src={props.enclosureUrl} type={props.enclosureType} />
|
||||
</video>
|
||||
)}
|
||||
{hasAudio && (
|
||||
<audio controls>
|
||||
<source src={props.enclosureUrl} type={props.enclosureType} />
|
||||
</audio>
|
||||
)}
|
||||
{hasImage && <ImageWithPlaceholderWhileLoading src={props.enclosureUrl} alt="enclosure" />}
|
||||
</BasicHtmlStyles>
|
||||
)
|
||||
}
|
||||
import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
|
||||
import { BasicHtmlStyles } from "components/content/BasicHtmlStyles"
|
||||
|
||||
export function Enclosure(props: {
|
||||
enclosureType: string
|
||||
enclosureUrl: string
|
||||
}) {
|
||||
const hasVideo = props.enclosureType.startsWith("video")
|
||||
const hasAudio = props.enclosureType.startsWith("audio")
|
||||
const hasImage = props.enclosureType.startsWith("image")
|
||||
|
||||
return (
|
||||
<BasicHtmlStyles>
|
||||
{hasVideo && (
|
||||
// biome-ignore lint/a11y/useMediaCaption: we don't have any captions for videos
|
||||
<video controls width="100%">
|
||||
<source src={props.enclosureUrl} type={props.enclosureType} />
|
||||
</video>
|
||||
)}
|
||||
{hasAudio && (
|
||||
// biome-ignore lint/a11y/useMediaCaption: we don't have any captions for audio
|
||||
<audio controls>
|
||||
<source src={props.enclosureUrl} type={props.enclosureType} />
|
||||
</audio>
|
||||
)}
|
||||
{hasImage && <ImageWithPlaceholderWhileLoading src={props.enclosureUrl} alt="enclosure" />}
|
||||
</BasicHtmlStyles>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,329 +1,329 @@
|
||||
import { Trans } from "@lingui/macro"
|
||||
import { Box } from "@mantine/core"
|
||||
import { openModal } from "@mantine/modals"
|
||||
import { Constants } from "app/constants"
|
||||
import { type ExpendableEntry } from "app/entries/slice"
|
||||
import {
|
||||
loadMoreEntries,
|
||||
markAllEntries,
|
||||
markEntry,
|
||||
reloadEntries,
|
||||
selectEntry,
|
||||
selectNextEntry,
|
||||
selectPreviousEntry,
|
||||
starEntry,
|
||||
} from "app/entries/thunks"
|
||||
import { redirectToRootCategory } from "app/redirect/thunks"
|
||||
import { useAppDispatch, useAppSelector } from "app/store"
|
||||
import { toggleSidebar } from "app/tree/slice"
|
||||
import { KeyboardShortcutsHelp } from "components/KeyboardShortcutsHelp"
|
||||
import { Loader } from "components/Loader"
|
||||
import { useBrowserExtension } from "hooks/useBrowserExtension"
|
||||
import { useMousetrap } from "hooks/useMousetrap"
|
||||
import { useViewMode } from "hooks/useViewMode"
|
||||
import { useEffect } from "react"
|
||||
import { useContextMenu } from "react-contexify"
|
||||
import InfiniteScroll from "react-infinite-scroller"
|
||||
import { throttle } from "throttle-debounce"
|
||||
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 loading = useAppSelector(state => state.entries.loading)
|
||||
const scrollMarks = useAppSelector(state => state.user.settings?.scrollMarks)
|
||||
const scrollingToEntry = useAppSelector(state => state.entries.scrollingToEntry)
|
||||
const sidebarVisible = useAppSelector(state => state.tree.sidebarVisible)
|
||||
const customContextMenu = useAppSelector(state => state.user.settings?.customContextMenu)
|
||||
const { viewMode } = useViewMode()
|
||||
const dispatch = useAppDispatch()
|
||||
const { openLinkInBackgroundTab } = useBrowserExtension()
|
||||
|
||||
const selectedEntry = entries.find(e => e.id === selectedEntryId)
|
||||
|
||||
const headerClicked = (entry: ExpendableEntry, event: React.MouseEvent) => {
|
||||
const middleClick = event.button === 1 || event.ctrlKey || event.metaKey
|
||||
if (middleClick || viewMode === "expanded") {
|
||||
dispatch(markEntry({ entry, read: true }))
|
||||
} else if (event.button === 0) {
|
||||
// main click
|
||||
// don't trigger the link
|
||||
event.preventDefault()
|
||||
|
||||
dispatch(
|
||||
selectEntry({
|
||||
entry,
|
||||
expand: !entry.expanded,
|
||||
markAsRead: !entry.expanded,
|
||||
scrollToEntry: true,
|
||||
})
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const contextMenu = useContextMenu()
|
||||
const headerRightClicked = (entry: ExpendableEntry, event: React.MouseEvent) => {
|
||||
if (event.shiftKey || !customContextMenu) return
|
||||
|
||||
event.preventDefault()
|
||||
contextMenu.show({
|
||||
id: Constants.dom.entryContextMenuId(entry),
|
||||
event,
|
||||
})
|
||||
}
|
||||
|
||||
const bodyClicked = (entry: ExpendableEntry) => {
|
||||
if (viewMode !== "expanded") return
|
||||
|
||||
// entry is already selected
|
||||
if (entry.id === selectedEntryId) return
|
||||
|
||||
dispatch(
|
||||
selectEntry({
|
||||
entry,
|
||||
expand: true,
|
||||
markAsRead: true,
|
||||
scrollToEntry: true,
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
const swipedLeft = async (entry: ExpendableEntry) => await dispatch(markEntry({ entry, read: !entry.read }))
|
||||
|
||||
// close context menu on scroll
|
||||
useEffect(() => {
|
||||
const listener = throttle(100, () => contextMenu.hideAll())
|
||||
window.addEventListener("scroll", listener)
|
||||
return () => window.removeEventListener("scroll", listener)
|
||||
}, [contextMenu])
|
||||
|
||||
useEffect(() => {
|
||||
const listener = throttle(100, () => {
|
||||
if (viewMode !== "expanded") return
|
||||
if (scrollingToEntry) return
|
||||
|
||||
const currentEntry = entries
|
||||
// use slice to get a copy of the array because reverse mutates the array in-place
|
||||
.slice()
|
||||
.reverse()
|
||||
.find(e => {
|
||||
const el = document.getElementById(Constants.dom.entryId(e))
|
||||
return el && !Constants.layout.isTopVisible(el)
|
||||
})
|
||||
if (currentEntry) {
|
||||
dispatch(
|
||||
selectEntry({
|
||||
entry: currentEntry,
|
||||
expand: false,
|
||||
markAsRead: !!scrollMarks,
|
||||
scrollToEntry: false,
|
||||
})
|
||||
)
|
||||
}
|
||||
})
|
||||
window.addEventListener("scroll", listener)
|
||||
return () => window.removeEventListener("scroll", listener)
|
||||
}, [dispatch, contextMenu, entries, viewMode, scrollMarks, scrollingToEntry])
|
||||
|
||||
useMousetrap("r", async () => await dispatch(reloadEntries()))
|
||||
useMousetrap(
|
||||
"j",
|
||||
async () =>
|
||||
await dispatch(
|
||||
selectNextEntry({
|
||||
expand: true,
|
||||
markAsRead: true,
|
||||
scrollToEntry: true,
|
||||
})
|
||||
)
|
||||
)
|
||||
useMousetrap(
|
||||
"n",
|
||||
async () =>
|
||||
await dispatch(
|
||||
selectNextEntry({
|
||||
expand: false,
|
||||
markAsRead: false,
|
||||
scrollToEntry: true,
|
||||
})
|
||||
)
|
||||
)
|
||||
useMousetrap(
|
||||
"k",
|
||||
async () =>
|
||||
await dispatch(
|
||||
selectPreviousEntry({
|
||||
expand: true,
|
||||
markAsRead: true,
|
||||
scrollToEntry: true,
|
||||
})
|
||||
)
|
||||
)
|
||||
useMousetrap(
|
||||
"p",
|
||||
async () =>
|
||||
await dispatch(
|
||||
selectPreviousEntry({
|
||||
expand: false,
|
||||
markAsRead: false,
|
||||
scrollToEntry: true,
|
||||
})
|
||||
)
|
||||
)
|
||||
useMousetrap("space", () => {
|
||||
if (selectedEntry) {
|
||||
if (selectedEntry.expanded) {
|
||||
const entryElement = document.getElementById(Constants.dom.entryId(selectedEntry))
|
||||
if (entryElement && Constants.layout.isBottomVisible(entryElement)) {
|
||||
dispatch(
|
||||
selectNextEntry({
|
||||
expand: true,
|
||||
markAsRead: true,
|
||||
scrollToEntry: true,
|
||||
})
|
||||
)
|
||||
} else {
|
||||
window.scrollTo({
|
||||
top: window.scrollY + document.documentElement.clientHeight * 0.8,
|
||||
behavior: "smooth",
|
||||
})
|
||||
}
|
||||
} else {
|
||||
dispatch(
|
||||
selectEntry({
|
||||
entry: selectedEntry,
|
||||
expand: true,
|
||||
markAsRead: true,
|
||||
scrollToEntry: true,
|
||||
})
|
||||
)
|
||||
}
|
||||
} else {
|
||||
dispatch(
|
||||
selectNextEntry({
|
||||
expand: true,
|
||||
markAsRead: true,
|
||||
scrollToEntry: true,
|
||||
})
|
||||
)
|
||||
}
|
||||
})
|
||||
useMousetrap("shift+space", () => {
|
||||
if (selectedEntry) {
|
||||
if (selectedEntry.expanded) {
|
||||
const entryElement = document.getElementById(Constants.dom.entryId(selectedEntry))
|
||||
if (entryElement && Constants.layout.isTopVisible(entryElement)) {
|
||||
dispatch(
|
||||
selectPreviousEntry({
|
||||
expand: true,
|
||||
markAsRead: true,
|
||||
scrollToEntry: true,
|
||||
})
|
||||
)
|
||||
} else {
|
||||
window.scrollTo({
|
||||
top: window.scrollY - document.documentElement.clientHeight * 0.8,
|
||||
behavior: "smooth",
|
||||
})
|
||||
}
|
||||
} else {
|
||||
dispatch(
|
||||
selectPreviousEntry({
|
||||
expand: true,
|
||||
markAsRead: true,
|
||||
scrollToEntry: true,
|
||||
})
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
useMousetrap(["o", "enter"], () => {
|
||||
// toggle expanded status
|
||||
if (!selectedEntry) return
|
||||
dispatch(
|
||||
selectEntry({
|
||||
entry: selectedEntry,
|
||||
expand: !selectedEntry.expanded,
|
||||
markAsRead: !selectedEntry.expanded,
|
||||
scrollToEntry: true,
|
||||
})
|
||||
)
|
||||
})
|
||||
useMousetrap("v", () => {
|
||||
// open tab in foreground
|
||||
if (!selectedEntry) return
|
||||
window.open(selectedEntry.url, "_blank", "noreferrer")
|
||||
})
|
||||
useMousetrap("b", () => {
|
||||
if (!selectedEntry) return
|
||||
openLinkInBackgroundTab(selectedEntry.url)
|
||||
})
|
||||
useMousetrap("m", () => {
|
||||
// toggle read status
|
||||
if (!selectedEntry) return
|
||||
dispatch(markEntry({ entry: selectedEntry, read: !selectedEntry.read }))
|
||||
})
|
||||
useMousetrap("s", () => {
|
||||
// toggle starred status
|
||||
if (!selectedEntry) return
|
||||
dispatch(starEntry({ entry: selectedEntry, starred: !selectedEntry.starred }))
|
||||
})
|
||||
useMousetrap("shift+a", () => {
|
||||
// mark all entries as read
|
||||
dispatch(
|
||||
markAllEntries({
|
||||
sourceType: source.type,
|
||||
req: {
|
||||
id: source.id,
|
||||
read: true,
|
||||
olderThan: Date.now(),
|
||||
insertedBefore: entriesTimestamp,
|
||||
},
|
||||
})
|
||||
)
|
||||
})
|
||||
useMousetrap("g a", async () => await dispatch(redirectToRootCategory()))
|
||||
useMousetrap("f", () => dispatch(toggleSidebar()))
|
||||
useMousetrap("?", () =>
|
||||
openModal({
|
||||
title: <Trans>Keyboard shortcuts</Trans>,
|
||||
size: "xl",
|
||||
children: <KeyboardShortcutsHelp />,
|
||||
})
|
||||
)
|
||||
|
||||
return (
|
||||
<InfiniteScroll
|
||||
id="entries"
|
||||
className={`view-mode-${viewMode}`}
|
||||
initialLoad={false}
|
||||
loadMore={async () => await (!loading && dispatch(loadMoreEntries()))}
|
||||
hasMore={hasMore}
|
||||
loader={<Box key={0}>{loading && <Loader />}</Box>}
|
||||
>
|
||||
{entries.map(entry => (
|
||||
<div
|
||||
key={entry.id}
|
||||
ref={el => {
|
||||
if (el) el.id = Constants.dom.entryId(entry)
|
||||
}}
|
||||
>
|
||||
<FeedEntry
|
||||
entry={entry}
|
||||
expanded={!!entry.expanded || viewMode === "expanded"}
|
||||
selected={entry.id === selectedEntryId}
|
||||
showSelectionIndicator={entry.id === selectedEntryId && (!entry.expanded || viewMode === "expanded")}
|
||||
maxWidth={sidebarVisible ? Constants.layout.entryMaxWidth : undefined}
|
||||
onHeaderClick={event => headerClicked(entry, event)}
|
||||
onHeaderRightClick={event => headerRightClicked(entry, event)}
|
||||
onBodyClick={() => bodyClicked(entry)}
|
||||
onSwipedLeft={async () => await swipedLeft(entry)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</InfiniteScroll>
|
||||
)
|
||||
}
|
||||
import { Trans } from "@lingui/macro"
|
||||
import { Box } from "@mantine/core"
|
||||
import { openModal } from "@mantine/modals"
|
||||
import { Constants } from "app/constants"
|
||||
import type { ExpendableEntry } from "app/entries/slice"
|
||||
import {
|
||||
loadMoreEntries,
|
||||
markAllEntries,
|
||||
markEntry,
|
||||
reloadEntries,
|
||||
selectEntry,
|
||||
selectNextEntry,
|
||||
selectPreviousEntry,
|
||||
starEntry,
|
||||
} from "app/entries/thunks"
|
||||
import { redirectToRootCategory } from "app/redirect/thunks"
|
||||
import { useAppDispatch, useAppSelector } from "app/store"
|
||||
import { toggleSidebar } from "app/tree/slice"
|
||||
import { KeyboardShortcutsHelp } from "components/KeyboardShortcutsHelp"
|
||||
import { Loader } from "components/Loader"
|
||||
import { useBrowserExtension } from "hooks/useBrowserExtension"
|
||||
import { useMousetrap } from "hooks/useMousetrap"
|
||||
import { useViewMode } from "hooks/useViewMode"
|
||||
import { useEffect } from "react"
|
||||
import { useContextMenu } from "react-contexify"
|
||||
import InfiniteScroll from "react-infinite-scroller"
|
||||
import { throttle } from "throttle-debounce"
|
||||
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 loading = useAppSelector(state => state.entries.loading)
|
||||
const scrollMarks = useAppSelector(state => state.user.settings?.scrollMarks)
|
||||
const scrollingToEntry = useAppSelector(state => state.entries.scrollingToEntry)
|
||||
const sidebarVisible = useAppSelector(state => state.tree.sidebarVisible)
|
||||
const customContextMenu = useAppSelector(state => state.user.settings?.customContextMenu)
|
||||
const { viewMode } = useViewMode()
|
||||
const dispatch = useAppDispatch()
|
||||
const { openLinkInBackgroundTab } = useBrowserExtension()
|
||||
|
||||
const selectedEntry = entries.find(e => e.id === selectedEntryId)
|
||||
|
||||
const headerClicked = (entry: ExpendableEntry, event: React.MouseEvent) => {
|
||||
const middleClick = event.button === 1 || event.ctrlKey || event.metaKey
|
||||
if (middleClick || viewMode === "expanded") {
|
||||
dispatch(markEntry({ entry, read: true }))
|
||||
} else if (event.button === 0) {
|
||||
// main click
|
||||
// don't trigger the link
|
||||
event.preventDefault()
|
||||
|
||||
dispatch(
|
||||
selectEntry({
|
||||
entry,
|
||||
expand: !entry.expanded,
|
||||
markAsRead: !entry.expanded,
|
||||
scrollToEntry: true,
|
||||
})
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const contextMenu = useContextMenu()
|
||||
const headerRightClicked = (entry: ExpendableEntry, event: React.MouseEvent) => {
|
||||
if (event.shiftKey || !customContextMenu) return
|
||||
|
||||
event.preventDefault()
|
||||
contextMenu.show({
|
||||
id: Constants.dom.entryContextMenuId(entry),
|
||||
event,
|
||||
})
|
||||
}
|
||||
|
||||
const bodyClicked = (entry: ExpendableEntry) => {
|
||||
if (viewMode !== "expanded") return
|
||||
|
||||
// entry is already selected
|
||||
if (entry.id === selectedEntryId) return
|
||||
|
||||
dispatch(
|
||||
selectEntry({
|
||||
entry,
|
||||
expand: true,
|
||||
markAsRead: true,
|
||||
scrollToEntry: true,
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
const swipedLeft = async (entry: ExpendableEntry) => await dispatch(markEntry({ entry, read: !entry.read }))
|
||||
|
||||
// close context menu on scroll
|
||||
useEffect(() => {
|
||||
const listener = throttle(100, () => contextMenu.hideAll())
|
||||
window.addEventListener("scroll", listener)
|
||||
return () => window.removeEventListener("scroll", listener)
|
||||
}, [contextMenu])
|
||||
|
||||
useEffect(() => {
|
||||
const listener = throttle(100, () => {
|
||||
if (viewMode !== "expanded") return
|
||||
if (scrollingToEntry) return
|
||||
|
||||
const currentEntry = entries
|
||||
// use slice to get a copy of the array because reverse mutates the array in-place
|
||||
.slice()
|
||||
.reverse()
|
||||
.find(e => {
|
||||
const el = document.getElementById(Constants.dom.entryId(e))
|
||||
return el && !Constants.layout.isTopVisible(el)
|
||||
})
|
||||
if (currentEntry) {
|
||||
dispatch(
|
||||
selectEntry({
|
||||
entry: currentEntry,
|
||||
expand: false,
|
||||
markAsRead: !!scrollMarks,
|
||||
scrollToEntry: false,
|
||||
})
|
||||
)
|
||||
}
|
||||
})
|
||||
window.addEventListener("scroll", listener)
|
||||
return () => window.removeEventListener("scroll", listener)
|
||||
}, [dispatch, entries, viewMode, scrollMarks, scrollingToEntry])
|
||||
|
||||
useMousetrap("r", async () => await dispatch(reloadEntries()))
|
||||
useMousetrap(
|
||||
"j",
|
||||
async () =>
|
||||
await dispatch(
|
||||
selectNextEntry({
|
||||
expand: true,
|
||||
markAsRead: true,
|
||||
scrollToEntry: true,
|
||||
})
|
||||
)
|
||||
)
|
||||
useMousetrap(
|
||||
"n",
|
||||
async () =>
|
||||
await dispatch(
|
||||
selectNextEntry({
|
||||
expand: false,
|
||||
markAsRead: false,
|
||||
scrollToEntry: true,
|
||||
})
|
||||
)
|
||||
)
|
||||
useMousetrap(
|
||||
"k",
|
||||
async () =>
|
||||
await dispatch(
|
||||
selectPreviousEntry({
|
||||
expand: true,
|
||||
markAsRead: true,
|
||||
scrollToEntry: true,
|
||||
})
|
||||
)
|
||||
)
|
||||
useMousetrap(
|
||||
"p",
|
||||
async () =>
|
||||
await dispatch(
|
||||
selectPreviousEntry({
|
||||
expand: false,
|
||||
markAsRead: false,
|
||||
scrollToEntry: true,
|
||||
})
|
||||
)
|
||||
)
|
||||
useMousetrap("space", () => {
|
||||
if (selectedEntry) {
|
||||
if (selectedEntry.expanded) {
|
||||
const entryElement = document.getElementById(Constants.dom.entryId(selectedEntry))
|
||||
if (entryElement && Constants.layout.isBottomVisible(entryElement)) {
|
||||
dispatch(
|
||||
selectNextEntry({
|
||||
expand: true,
|
||||
markAsRead: true,
|
||||
scrollToEntry: true,
|
||||
})
|
||||
)
|
||||
} else {
|
||||
window.scrollTo({
|
||||
top: window.scrollY + document.documentElement.clientHeight * 0.8,
|
||||
behavior: "smooth",
|
||||
})
|
||||
}
|
||||
} else {
|
||||
dispatch(
|
||||
selectEntry({
|
||||
entry: selectedEntry,
|
||||
expand: true,
|
||||
markAsRead: true,
|
||||
scrollToEntry: true,
|
||||
})
|
||||
)
|
||||
}
|
||||
} else {
|
||||
dispatch(
|
||||
selectNextEntry({
|
||||
expand: true,
|
||||
markAsRead: true,
|
||||
scrollToEntry: true,
|
||||
})
|
||||
)
|
||||
}
|
||||
})
|
||||
useMousetrap("shift+space", () => {
|
||||
if (selectedEntry) {
|
||||
if (selectedEntry.expanded) {
|
||||
const entryElement = document.getElementById(Constants.dom.entryId(selectedEntry))
|
||||
if (entryElement && Constants.layout.isTopVisible(entryElement)) {
|
||||
dispatch(
|
||||
selectPreviousEntry({
|
||||
expand: true,
|
||||
markAsRead: true,
|
||||
scrollToEntry: true,
|
||||
})
|
||||
)
|
||||
} else {
|
||||
window.scrollTo({
|
||||
top: window.scrollY - document.documentElement.clientHeight * 0.8,
|
||||
behavior: "smooth",
|
||||
})
|
||||
}
|
||||
} else {
|
||||
dispatch(
|
||||
selectPreviousEntry({
|
||||
expand: true,
|
||||
markAsRead: true,
|
||||
scrollToEntry: true,
|
||||
})
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
useMousetrap(["o", "enter"], () => {
|
||||
// toggle expanded status
|
||||
if (!selectedEntry) return
|
||||
dispatch(
|
||||
selectEntry({
|
||||
entry: selectedEntry,
|
||||
expand: !selectedEntry.expanded,
|
||||
markAsRead: !selectedEntry.expanded,
|
||||
scrollToEntry: true,
|
||||
})
|
||||
)
|
||||
})
|
||||
useMousetrap("v", () => {
|
||||
// open tab in foreground
|
||||
if (!selectedEntry) return
|
||||
window.open(selectedEntry.url, "_blank", "noreferrer")
|
||||
})
|
||||
useMousetrap("b", () => {
|
||||
if (!selectedEntry) return
|
||||
openLinkInBackgroundTab(selectedEntry.url)
|
||||
})
|
||||
useMousetrap("m", () => {
|
||||
// toggle read status
|
||||
if (!selectedEntry) return
|
||||
dispatch(markEntry({ entry: selectedEntry, read: !selectedEntry.read }))
|
||||
})
|
||||
useMousetrap("s", () => {
|
||||
// toggle starred status
|
||||
if (!selectedEntry) return
|
||||
dispatch(starEntry({ entry: selectedEntry, starred: !selectedEntry.starred }))
|
||||
})
|
||||
useMousetrap("shift+a", () => {
|
||||
// mark all entries as read
|
||||
dispatch(
|
||||
markAllEntries({
|
||||
sourceType: source.type,
|
||||
req: {
|
||||
id: source.id,
|
||||
read: true,
|
||||
olderThan: Date.now(),
|
||||
insertedBefore: entriesTimestamp,
|
||||
},
|
||||
})
|
||||
)
|
||||
})
|
||||
useMousetrap("g a", async () => await dispatch(redirectToRootCategory()))
|
||||
useMousetrap("f", () => dispatch(toggleSidebar()))
|
||||
useMousetrap("?", () =>
|
||||
openModal({
|
||||
title: <Trans>Keyboard shortcuts</Trans>,
|
||||
size: "xl",
|
||||
children: <KeyboardShortcutsHelp />,
|
||||
})
|
||||
)
|
||||
|
||||
return (
|
||||
<InfiniteScroll
|
||||
id="entries"
|
||||
className={`view-mode-${viewMode}`}
|
||||
initialLoad={false}
|
||||
loadMore={async () => await (!loading && dispatch(loadMoreEntries()))}
|
||||
hasMore={hasMore}
|
||||
loader={<Box key={0}>{loading && <Loader />}</Box>}
|
||||
>
|
||||
{entries.map(entry => (
|
||||
<div
|
||||
key={entry.id}
|
||||
ref={el => {
|
||||
if (el) el.id = Constants.dom.entryId(entry)
|
||||
}}
|
||||
>
|
||||
<FeedEntry
|
||||
entry={entry}
|
||||
expanded={!!entry.expanded || viewMode === "expanded"}
|
||||
selected={entry.id === selectedEntryId}
|
||||
showSelectionIndicator={entry.id === selectedEntryId && (!entry.expanded || viewMode === "expanded")}
|
||||
maxWidth={sidebarVisible ? Constants.layout.entryMaxWidth : undefined}
|
||||
onHeaderClick={event => headerClicked(entry, event)}
|
||||
onHeaderRightClick={event => headerRightClicked(entry, event)}
|
||||
onBodyClick={() => bodyClicked(entry)}
|
||||
onSwipedLeft={async () => await swipedLeft(entry)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</InfiniteScroll>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,191 +1,191 @@
|
||||
import { Box, Divider, type MantineRadius, type MantineSpacing, Paper } from "@mantine/core"
|
||||
import { Constants } from "app/constants"
|
||||
import { useAppSelector } from "app/store"
|
||||
import { type Entry, type ViewMode } from "app/types"
|
||||
import { FeedEntryCompactHeader } from "components/content/header/FeedEntryCompactHeader"
|
||||
import { FeedEntryHeader } from "components/content/header/FeedEntryHeader"
|
||||
import { useMobile } from "hooks/useMobile"
|
||||
import { useViewMode } from "hooks/useViewMode"
|
||||
import React from "react"
|
||||
import { useSwipeable } from "react-swipeable"
|
||||
import { tss } from "tss"
|
||||
import { FeedEntryBody } from "./FeedEntryBody"
|
||||
import { FeedEntryContextMenu } from "./FeedEntryContextMenu"
|
||||
import { FeedEntryFooter } from "./FeedEntryFooter"
|
||||
|
||||
interface FeedEntryProps {
|
||||
entry: Entry
|
||||
expanded: boolean
|
||||
selected: boolean
|
||||
showSelectionIndicator: boolean
|
||||
maxWidth?: number
|
||||
onHeaderClick: (e: React.MouseEvent) => void
|
||||
onHeaderRightClick: (e: React.MouseEvent) => void
|
||||
onBodyClick: (e: React.MouseEvent) => void
|
||||
onSwipedLeft: () => void
|
||||
}
|
||||
|
||||
const useStyles = tss
|
||||
.withParams<{
|
||||
read: boolean
|
||||
expanded: boolean
|
||||
viewMode: ViewMode
|
||||
rtl: boolean
|
||||
showSelectionIndicator: boolean
|
||||
maxWidth?: number
|
||||
}>()
|
||||
.create(({ theme, colorScheme, read, expanded, viewMode, rtl, showSelectionIndicator, maxWidth }) => {
|
||||
let backgroundColor
|
||||
if (colorScheme === "dark") {
|
||||
backgroundColor = read ? "inherit" : theme.colors.dark[5]
|
||||
} else {
|
||||
backgroundColor = read && !expanded ? theme.colors.gray[0] : "inherit"
|
||||
}
|
||||
|
||||
let marginY = 10
|
||||
if (viewMode === "title") {
|
||||
marginY = 2
|
||||
} else if (viewMode === "cozy") {
|
||||
marginY = 6
|
||||
}
|
||||
|
||||
let mobileMarginY = 6
|
||||
if (viewMode === "title") {
|
||||
mobileMarginY = 2
|
||||
} else if (viewMode === "cozy") {
|
||||
mobileMarginY = 4
|
||||
}
|
||||
|
||||
let backgroundHoverColor = backgroundColor
|
||||
if (!expanded && !read) {
|
||||
backgroundHoverColor = colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[1]
|
||||
}
|
||||
|
||||
let paperBorderLeftColor
|
||||
if (showSelectionIndicator) {
|
||||
const borderLeftColor = colorScheme === "dark" ? theme.colors[theme.primaryColor][4] : theme.colors[theme.primaryColor][6]
|
||||
paperBorderLeftColor = `${borderLeftColor} !important`
|
||||
}
|
||||
|
||||
return {
|
||||
paper: {
|
||||
backgroundColor,
|
||||
borderLeftColor: paperBorderLeftColor,
|
||||
marginTop: marginY,
|
||||
marginBottom: marginY,
|
||||
[`@media (max-width: ${Constants.layout.mobileBreakpoint}px)`]: {
|
||||
marginTop: mobileMarginY,
|
||||
marginBottom: mobileMarginY,
|
||||
},
|
||||
"@media (hover: hover)": {
|
||||
"&:hover": {
|
||||
backgroundColor: backgroundHoverColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
headerLink: {
|
||||
color: "inherit",
|
||||
textDecoration: "none",
|
||||
},
|
||||
body: {
|
||||
direction: rtl ? "rtl" : "ltr",
|
||||
maxWidth: maxWidth ?? "100%",
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
export function FeedEntry(props: FeedEntryProps) {
|
||||
const { viewMode } = useViewMode()
|
||||
const { classes, cx } = useStyles({
|
||||
read: props.entry.read,
|
||||
expanded: props.expanded,
|
||||
viewMode,
|
||||
rtl: props.entry.rtl,
|
||||
showSelectionIndicator: props.showSelectionIndicator,
|
||||
maxWidth: props.maxWidth,
|
||||
})
|
||||
|
||||
const externalLinkDisplayMode = useAppSelector(state => state.user.settings?.externalLinkIconDisplayMode)
|
||||
const starIconDisplayMode = useAppSelector(state => state.user.settings?.starIconDisplayMode)
|
||||
const mobile = useMobile()
|
||||
|
||||
const showExternalLinkIcon =
|
||||
externalLinkDisplayMode && ["always", mobile ? "on_mobile" : "on_desktop"].includes(externalLinkDisplayMode)
|
||||
const showStarIcon =
|
||||
props.entry.markable && starIconDisplayMode && ["always", mobile ? "on_mobile" : "on_desktop"].includes(starIconDisplayMode)
|
||||
|
||||
const swipeHandlers = useSwipeable({
|
||||
onSwipedLeft: props.onSwipedLeft,
|
||||
})
|
||||
|
||||
let paddingX: MantineSpacing = "xs"
|
||||
if (viewMode === "title" || viewMode === "cozy") paddingX = 6
|
||||
|
||||
let paddingY: MantineSpacing = "xs"
|
||||
if (viewMode === "title") {
|
||||
paddingY = 4
|
||||
} else if (viewMode === "cozy") {
|
||||
paddingY = 8
|
||||
}
|
||||
|
||||
let borderRadius: MantineRadius = "sm"
|
||||
if (viewMode === "title") {
|
||||
borderRadius = 0
|
||||
} else if (viewMode === "cozy") {
|
||||
borderRadius = "xs"
|
||||
}
|
||||
|
||||
const compactHeader = !props.expanded && (viewMode === "title" || viewMode === "cozy")
|
||||
return (
|
||||
<Paper
|
||||
withBorder
|
||||
radius={borderRadius}
|
||||
className={cx(classes.paper, {
|
||||
read: props.entry.read,
|
||||
unread: !props.entry.read,
|
||||
expanded: props.expanded,
|
||||
selected: props.selected,
|
||||
"show-selection-indicator": props.showSelectionIndicator,
|
||||
})}
|
||||
>
|
||||
<a
|
||||
className={classes.headerLink}
|
||||
href={props.entry.url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
onClick={props.onHeaderClick}
|
||||
onAuxClick={props.onHeaderClick}
|
||||
onContextMenu={props.onHeaderRightClick}
|
||||
>
|
||||
<Box px={paddingX} py={paddingY} {...swipeHandlers}>
|
||||
{compactHeader && (
|
||||
<FeedEntryCompactHeader
|
||||
entry={props.entry}
|
||||
showStarIcon={showStarIcon}
|
||||
showExternalLinkIcon={showExternalLinkIcon}
|
||||
/>
|
||||
)}
|
||||
{!compactHeader && (
|
||||
<FeedEntryHeader
|
||||
entry={props.entry}
|
||||
expanded={props.expanded}
|
||||
showStarIcon={showStarIcon}
|
||||
showExternalLinkIcon={showExternalLinkIcon}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</a>
|
||||
{props.expanded && (
|
||||
<Box px={paddingX} pb={paddingY} onClick={props.onBodyClick}>
|
||||
<Box className={classes.body}>
|
||||
<FeedEntryBody entry={props.entry} />
|
||||
</Box>
|
||||
<Divider variant="dashed" my={paddingY} />
|
||||
<FeedEntryFooter entry={props.entry} />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<FeedEntryContextMenu entry={props.entry} />
|
||||
</Paper>
|
||||
)
|
||||
}
|
||||
import { Box, Divider, type MantineRadius, type MantineSpacing, Paper } from "@mantine/core"
|
||||
import { Constants } from "app/constants"
|
||||
import { useAppSelector } from "app/store"
|
||||
import type { Entry, ViewMode } from "app/types"
|
||||
import { FeedEntryCompactHeader } from "components/content/header/FeedEntryCompactHeader"
|
||||
import { FeedEntryHeader } from "components/content/header/FeedEntryHeader"
|
||||
import { useMobile } from "hooks/useMobile"
|
||||
import { useViewMode } from "hooks/useViewMode"
|
||||
import type React from "react"
|
||||
import { useSwipeable } from "react-swipeable"
|
||||
import { tss } from "tss"
|
||||
import { FeedEntryBody } from "./FeedEntryBody"
|
||||
import { FeedEntryContextMenu } from "./FeedEntryContextMenu"
|
||||
import { FeedEntryFooter } from "./FeedEntryFooter"
|
||||
|
||||
interface FeedEntryProps {
|
||||
entry: Entry
|
||||
expanded: boolean
|
||||
selected: boolean
|
||||
showSelectionIndicator: boolean
|
||||
maxWidth?: number
|
||||
onHeaderClick: (e: React.MouseEvent) => void
|
||||
onHeaderRightClick: (e: React.MouseEvent) => void
|
||||
onBodyClick: (e: React.MouseEvent) => void
|
||||
onSwipedLeft: () => void
|
||||
}
|
||||
|
||||
const useStyles = tss
|
||||
.withParams<{
|
||||
read: boolean
|
||||
expanded: boolean
|
||||
viewMode: ViewMode
|
||||
rtl: boolean
|
||||
showSelectionIndicator: boolean
|
||||
maxWidth?: number
|
||||
}>()
|
||||
.create(({ theme, colorScheme, read, expanded, viewMode, rtl, showSelectionIndicator, maxWidth }) => {
|
||||
let backgroundColor: string
|
||||
if (colorScheme === "dark") {
|
||||
backgroundColor = read ? "inherit" : theme.colors.dark[5]
|
||||
} else {
|
||||
backgroundColor = read && !expanded ? theme.colors.gray[0] : "inherit"
|
||||
}
|
||||
|
||||
let marginY = 10
|
||||
if (viewMode === "title") {
|
||||
marginY = 2
|
||||
} else if (viewMode === "cozy") {
|
||||
marginY = 6
|
||||
}
|
||||
|
||||
let mobileMarginY = 6
|
||||
if (viewMode === "title") {
|
||||
mobileMarginY = 2
|
||||
} else if (viewMode === "cozy") {
|
||||
mobileMarginY = 4
|
||||
}
|
||||
|
||||
let backgroundHoverColor = backgroundColor
|
||||
if (!expanded && !read) {
|
||||
backgroundHoverColor = colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[1]
|
||||
}
|
||||
|
||||
let paperBorderLeftColor = ""
|
||||
if (showSelectionIndicator) {
|
||||
const borderLeftColor = colorScheme === "dark" ? theme.colors[theme.primaryColor][4] : theme.colors[theme.primaryColor][6]
|
||||
paperBorderLeftColor = `${borderLeftColor} !important`
|
||||
}
|
||||
|
||||
return {
|
||||
paper: {
|
||||
backgroundColor,
|
||||
borderLeftColor: paperBorderLeftColor,
|
||||
marginTop: marginY,
|
||||
marginBottom: marginY,
|
||||
[`@media (max-width: ${Constants.layout.mobileBreakpoint}px)`]: {
|
||||
marginTop: mobileMarginY,
|
||||
marginBottom: mobileMarginY,
|
||||
},
|
||||
"@media (hover: hover)": {
|
||||
"&:hover": {
|
||||
backgroundColor: backgroundHoverColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
headerLink: {
|
||||
color: "inherit",
|
||||
textDecoration: "none",
|
||||
},
|
||||
body: {
|
||||
direction: rtl ? "rtl" : "ltr",
|
||||
maxWidth: maxWidth ?? "100%",
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
export function FeedEntry(props: FeedEntryProps) {
|
||||
const { viewMode } = useViewMode()
|
||||
const { classes, cx } = useStyles({
|
||||
read: props.entry.read,
|
||||
expanded: props.expanded,
|
||||
viewMode,
|
||||
rtl: props.entry.rtl,
|
||||
showSelectionIndicator: props.showSelectionIndicator,
|
||||
maxWidth: props.maxWidth,
|
||||
})
|
||||
|
||||
const externalLinkDisplayMode = useAppSelector(state => state.user.settings?.externalLinkIconDisplayMode)
|
||||
const starIconDisplayMode = useAppSelector(state => state.user.settings?.starIconDisplayMode)
|
||||
const mobile = useMobile()
|
||||
|
||||
const showExternalLinkIcon =
|
||||
externalLinkDisplayMode && ["always", mobile ? "on_mobile" : "on_desktop"].includes(externalLinkDisplayMode)
|
||||
const showStarIcon =
|
||||
props.entry.markable && starIconDisplayMode && ["always", mobile ? "on_mobile" : "on_desktop"].includes(starIconDisplayMode)
|
||||
|
||||
const swipeHandlers = useSwipeable({
|
||||
onSwipedLeft: props.onSwipedLeft,
|
||||
})
|
||||
|
||||
let paddingX: MantineSpacing = "xs"
|
||||
if (viewMode === "title" || viewMode === "cozy") paddingX = 6
|
||||
|
||||
let paddingY: MantineSpacing = "xs"
|
||||
if (viewMode === "title") {
|
||||
paddingY = 4
|
||||
} else if (viewMode === "cozy") {
|
||||
paddingY = 8
|
||||
}
|
||||
|
||||
let borderRadius: MantineRadius = "sm"
|
||||
if (viewMode === "title") {
|
||||
borderRadius = 0
|
||||
} else if (viewMode === "cozy") {
|
||||
borderRadius = "xs"
|
||||
}
|
||||
|
||||
const compactHeader = !props.expanded && (viewMode === "title" || viewMode === "cozy")
|
||||
return (
|
||||
<Paper
|
||||
withBorder
|
||||
radius={borderRadius}
|
||||
className={cx(classes.paper, {
|
||||
read: props.entry.read,
|
||||
unread: !props.entry.read,
|
||||
expanded: props.expanded,
|
||||
selected: props.selected,
|
||||
"show-selection-indicator": props.showSelectionIndicator,
|
||||
})}
|
||||
>
|
||||
<a
|
||||
className={classes.headerLink}
|
||||
href={props.entry.url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
onClick={props.onHeaderClick}
|
||||
onAuxClick={props.onHeaderClick}
|
||||
onContextMenu={props.onHeaderRightClick}
|
||||
>
|
||||
<Box px={paddingX} py={paddingY} {...swipeHandlers}>
|
||||
{compactHeader && (
|
||||
<FeedEntryCompactHeader
|
||||
entry={props.entry}
|
||||
showStarIcon={showStarIcon}
|
||||
showExternalLinkIcon={showExternalLinkIcon}
|
||||
/>
|
||||
)}
|
||||
{!compactHeader && (
|
||||
<FeedEntryHeader
|
||||
entry={props.entry}
|
||||
expanded={props.expanded}
|
||||
showStarIcon={showStarIcon}
|
||||
showExternalLinkIcon={showExternalLinkIcon}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</a>
|
||||
{props.expanded && (
|
||||
<Box px={paddingX} pb={paddingY} onClick={props.onBodyClick}>
|
||||
<Box className={classes.body}>
|
||||
<FeedEntryBody entry={props.entry} />
|
||||
</Box>
|
||||
<Divider variant="dashed" my={paddingY} />
|
||||
<FeedEntryFooter entry={props.entry} />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<FeedEntryContextMenu entry={props.entry} />
|
||||
</Paper>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,37 +1,37 @@
|
||||
import { Box } from "@mantine/core"
|
||||
import { useAppSelector } from "app/store"
|
||||
import { type 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) {
|
||||
const search = useAppSelector(state => state.entries.search)
|
||||
return (
|
||||
<Box>
|
||||
<Box>
|
||||
<Content content={props.entry.content} highlight={search} />
|
||||
</Box>
|
||||
{props.entry.enclosureType && 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>
|
||||
)
|
||||
}
|
||||
import { Box } from "@mantine/core"
|
||||
import { useAppSelector } from "app/store"
|
||||
import type { 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) {
|
||||
const search = useAppSelector(state => state.entries.search)
|
||||
return (
|
||||
<Box>
|
||||
<Box>
|
||||
<Content content={props.entry.content} highlight={search} />
|
||||
</Box>
|
||||
{props.entry.enclosureType && 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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,103 +1,103 @@
|
||||
import { Trans } from "@lingui/macro"
|
||||
import { Group } from "@mantine/core"
|
||||
import { Constants } from "app/constants"
|
||||
import { markEntriesUpToEntry, markEntry, starEntry } from "app/entries/thunks"
|
||||
import { redirectToFeed } from "app/redirect/thunks"
|
||||
import { useAppDispatch, useAppSelector } from "app/store"
|
||||
import { type Entry } from "app/types"
|
||||
import { truncate } from "app/utils"
|
||||
import { useBrowserExtension } from "hooks/useBrowserExtension"
|
||||
import { useColorScheme } from "hooks/useColorScheme"
|
||||
import { Item, Menu, Separator } from "react-contexify"
|
||||
import { TbArrowBarToDown, TbExternalLink, TbEyeCheck, TbEyeOff, TbRss, TbStar, TbStarOff } from "react-icons/tb"
|
||||
import { tss } from "tss"
|
||||
|
||||
interface FeedEntryContextMenuProps {
|
||||
entry: Entry
|
||||
}
|
||||
|
||||
const iconSize = 16
|
||||
const useStyles = tss.create(({ theme, colorScheme }) => ({
|
||||
menu: {
|
||||
// apply mantine theme from MenuItem.styles.ts
|
||||
fontSize: theme.fontSizes.sm,
|
||||
"--contexify-item-color": `${colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`,
|
||||
"--contexify-activeItem-color": `${colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`,
|
||||
"--contexify-activeItem-bgColor": `${colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[1]} !important`,
|
||||
},
|
||||
}))
|
||||
|
||||
export function FeedEntryContextMenu(props: FeedEntryContextMenuProps) {
|
||||
const colorScheme = useColorScheme()
|
||||
const { classes } = useStyles()
|
||||
const sourceType = useAppSelector(state => state.entries.source.type)
|
||||
const dispatch = useAppDispatch()
|
||||
const { openLinkInBackgroundTab } = useBrowserExtension()
|
||||
|
||||
return (
|
||||
<Menu id={Constants.dom.entryContextMenuId(props.entry)} theme={colorScheme} animation={false} className={classes.menu}>
|
||||
<Item
|
||||
onClick={() => {
|
||||
window.open(props.entry.url, "_blank", "noreferrer")
|
||||
dispatch(markEntry({ entry: props.entry, read: true }))
|
||||
}}
|
||||
>
|
||||
<Group>
|
||||
<TbExternalLink size={iconSize} />
|
||||
<Trans>Open link in new tab</Trans>
|
||||
</Group>
|
||||
</Item>
|
||||
<Item
|
||||
onClick={() => {
|
||||
openLinkInBackgroundTab(props.entry.url)
|
||||
dispatch(markEntry({ entry: props.entry, read: true }))
|
||||
}}
|
||||
>
|
||||
<Group>
|
||||
<TbExternalLink size={iconSize} />
|
||||
<Trans>Open link in new background tab</Trans>
|
||||
</Group>
|
||||
</Item>
|
||||
|
||||
<Separator />
|
||||
|
||||
<Item onClick={async () => await dispatch(starEntry({ entry: props.entry, starred: !props.entry.starred }))}>
|
||||
<Group>
|
||||
{props.entry.starred ? <TbStarOff size={iconSize} /> : <TbStar size={iconSize} />}
|
||||
{props.entry.starred ? <Trans>Unstar</Trans> : <Trans>Star</Trans>}
|
||||
</Group>
|
||||
</Item>
|
||||
{props.entry.markable && (
|
||||
<Item onClick={async () => await dispatch(markEntry({ entry: props.entry, read: !props.entry.read }))}>
|
||||
<Group>
|
||||
{props.entry.read ? <TbEyeOff size={iconSize} /> : <TbEyeCheck size={iconSize} />}
|
||||
{props.entry.read ? <Trans>Keep unread</Trans> : <Trans>Mark as read</Trans>}
|
||||
</Group>
|
||||
</Item>
|
||||
)}
|
||||
<Item onClick={async () => await dispatch(markEntriesUpToEntry(props.entry))}>
|
||||
<Group>
|
||||
<TbArrowBarToDown size={iconSize} />
|
||||
<Trans>Mark as read up to here</Trans>
|
||||
</Group>
|
||||
</Item>
|
||||
|
||||
{sourceType === "category" && (
|
||||
<>
|
||||
<Separator />
|
||||
|
||||
<Item
|
||||
onClick={() => {
|
||||
dispatch(redirectToFeed(props.entry.feedId))
|
||||
}}
|
||||
>
|
||||
<Group>
|
||||
<TbRss size={iconSize} />
|
||||
<Trans>Go to {truncate(props.entry.feedName, 30)}</Trans>
|
||||
</Group>
|
||||
</Item>
|
||||
</>
|
||||
)}
|
||||
</Menu>
|
||||
)
|
||||
}
|
||||
import { Trans } from "@lingui/macro"
|
||||
import { Group } from "@mantine/core"
|
||||
import { Constants } from "app/constants"
|
||||
import { markEntriesUpToEntry, markEntry, starEntry } from "app/entries/thunks"
|
||||
import { redirectToFeed } from "app/redirect/thunks"
|
||||
import { useAppDispatch, useAppSelector } from "app/store"
|
||||
import type { Entry } from "app/types"
|
||||
import { truncate } from "app/utils"
|
||||
import { useBrowserExtension } from "hooks/useBrowserExtension"
|
||||
import { useColorScheme } from "hooks/useColorScheme"
|
||||
import { Item, Menu, Separator } from "react-contexify"
|
||||
import { TbArrowBarToDown, TbExternalLink, TbEyeCheck, TbEyeOff, TbRss, TbStar, TbStarOff } from "react-icons/tb"
|
||||
import { tss } from "tss"
|
||||
|
||||
interface FeedEntryContextMenuProps {
|
||||
entry: Entry
|
||||
}
|
||||
|
||||
const iconSize = 16
|
||||
const useStyles = tss.create(({ theme, colorScheme }) => ({
|
||||
menu: {
|
||||
// apply mantine theme from MenuItem.styles.ts
|
||||
fontSize: theme.fontSizes.sm,
|
||||
"--contexify-item-color": `${colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`,
|
||||
"--contexify-activeItem-color": `${colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`,
|
||||
"--contexify-activeItem-bgColor": `${colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[1]} !important`,
|
||||
},
|
||||
}))
|
||||
|
||||
export function FeedEntryContextMenu(props: FeedEntryContextMenuProps) {
|
||||
const colorScheme = useColorScheme()
|
||||
const { classes } = useStyles()
|
||||
const sourceType = useAppSelector(state => state.entries.source.type)
|
||||
const dispatch = useAppDispatch()
|
||||
const { openLinkInBackgroundTab } = useBrowserExtension()
|
||||
|
||||
return (
|
||||
<Menu id={Constants.dom.entryContextMenuId(props.entry)} theme={colorScheme} animation={false} className={classes.menu}>
|
||||
<Item
|
||||
onClick={() => {
|
||||
window.open(props.entry.url, "_blank", "noreferrer")
|
||||
dispatch(markEntry({ entry: props.entry, read: true }))
|
||||
}}
|
||||
>
|
||||
<Group>
|
||||
<TbExternalLink size={iconSize} />
|
||||
<Trans>Open link in new tab</Trans>
|
||||
</Group>
|
||||
</Item>
|
||||
<Item
|
||||
onClick={() => {
|
||||
openLinkInBackgroundTab(props.entry.url)
|
||||
dispatch(markEntry({ entry: props.entry, read: true }))
|
||||
}}
|
||||
>
|
||||
<Group>
|
||||
<TbExternalLink size={iconSize} />
|
||||
<Trans>Open link in new background tab</Trans>
|
||||
</Group>
|
||||
</Item>
|
||||
|
||||
<Separator />
|
||||
|
||||
<Item onClick={async () => await dispatch(starEntry({ entry: props.entry, starred: !props.entry.starred }))}>
|
||||
<Group>
|
||||
{props.entry.starred ? <TbStarOff size={iconSize} /> : <TbStar size={iconSize} />}
|
||||
{props.entry.starred ? <Trans>Unstar</Trans> : <Trans>Star</Trans>}
|
||||
</Group>
|
||||
</Item>
|
||||
{props.entry.markable && (
|
||||
<Item onClick={async () => await dispatch(markEntry({ entry: props.entry, read: !props.entry.read }))}>
|
||||
<Group>
|
||||
{props.entry.read ? <TbEyeOff size={iconSize} /> : <TbEyeCheck size={iconSize} />}
|
||||
{props.entry.read ? <Trans>Keep unread</Trans> : <Trans>Mark as read</Trans>}
|
||||
</Group>
|
||||
</Item>
|
||||
)}
|
||||
<Item onClick={async () => await dispatch(markEntriesUpToEntry(props.entry))}>
|
||||
<Group>
|
||||
<TbArrowBarToDown size={iconSize} />
|
||||
<Trans>Mark as read up to here</Trans>
|
||||
</Group>
|
||||
</Item>
|
||||
|
||||
{sourceType === "category" && (
|
||||
<>
|
||||
<Separator />
|
||||
|
||||
<Item
|
||||
onClick={() => {
|
||||
dispatch(redirectToFeed(props.entry.feedId))
|
||||
}}
|
||||
>
|
||||
<Group>
|
||||
<TbRss size={iconSize} />
|
||||
<Trans>Go to {truncate(props.entry.feedName, 30)}</Trans>
|
||||
</Group>
|
||||
</Item>
|
||||
</>
|
||||
)}
|
||||
</Menu>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,102 +1,102 @@
|
||||
import { t, Trans } from "@lingui/macro"
|
||||
import { Group, Indicator, Popover, TagsInput } from "@mantine/core"
|
||||
import { markEntriesUpToEntry, markEntry, starEntry, tagEntry } from "app/entries/thunks"
|
||||
import { useAppDispatch, useAppSelector } from "app/store"
|
||||
import { type Entry } from "app/types"
|
||||
import { ActionButton } from "components/ActionButton"
|
||||
import { useActionButton } from "hooks/useActionButton"
|
||||
import { useMobile } from "hooks/useMobile"
|
||||
import { TbArrowBarToDown, TbExternalLink, TbEyeCheck, TbEyeOff, TbShare, TbStar, TbStarOff, TbTag } from "react-icons/tb"
|
||||
import { ShareButtons } from "./ShareButtons"
|
||||
|
||||
interface FeedEntryFooterProps {
|
||||
entry: Entry
|
||||
}
|
||||
|
||||
export function FeedEntryFooter(props: FeedEntryFooterProps) {
|
||||
const tags = useAppSelector(state => state.user.tags)
|
||||
const mobile = useMobile()
|
||||
const { spacing } = useActionButton()
|
||||
const dispatch = useAppDispatch()
|
||||
|
||||
const readStatusButtonClicked = async () =>
|
||||
await dispatch(
|
||||
markEntry({
|
||||
entry: props.entry,
|
||||
read: !props.entry.read,
|
||||
})
|
||||
)
|
||||
const onTagsChange = async (values: string[]) =>
|
||||
await dispatch(
|
||||
tagEntry({
|
||||
entryId: +props.entry.id,
|
||||
tags: values,
|
||||
})
|
||||
)
|
||||
|
||||
return (
|
||||
<Group justify="space-between">
|
||||
<Group gap={spacing}>
|
||||
{props.entry.markable && (
|
||||
<ActionButton
|
||||
icon={props.entry.read ? <TbEyeOff size={18} /> : <TbEyeCheck size={18} />}
|
||||
label={props.entry.read ? <Trans>Keep unread</Trans> : <Trans>Mark as read</Trans>}
|
||||
onClick={readStatusButtonClicked}
|
||||
/>
|
||||
)}
|
||||
<ActionButton
|
||||
icon={props.entry.starred ? <TbStarOff size={18} /> : <TbStar size={18} />}
|
||||
label={props.entry.starred ? <Trans>Unstar</Trans> : <Trans>Star</Trans>}
|
||||
onClick={async () =>
|
||||
await dispatch(
|
||||
starEntry({
|
||||
entry: props.entry,
|
||||
starred: !props.entry.starred,
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
|
||||
<Popover withArrow withinPortal shadow="md" closeOnClickOutside={!mobile}>
|
||||
<Popover.Target>
|
||||
<ActionButton icon={<TbShare size={18} />} label={<Trans>Share</Trans>} />
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown>
|
||||
<ShareButtons url={props.entry.url} description={props.entry.title} />
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
|
||||
{tags && (
|
||||
<Popover withArrow shadow="md" closeOnClickOutside={!mobile}>
|
||||
<Popover.Target>
|
||||
<Indicator label={props.entry.tags.length} disabled={props.entry.tags.length === 0} inline size={16}>
|
||||
<ActionButton icon={<TbTag size={18} />} label={<Trans>Tags</Trans>} />
|
||||
</Indicator>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown>
|
||||
<TagsInput
|
||||
placeholder={t`Tags`}
|
||||
data={tags}
|
||||
value={props.entry.tags}
|
||||
onChange={onTagsChange}
|
||||
comboboxProps={{
|
||||
withinPortal: false,
|
||||
}}
|
||||
/>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
)}
|
||||
|
||||
<a href={props.entry.url} target="_blank" rel="noreferrer">
|
||||
<ActionButton icon={<TbExternalLink size={18} />} label={<Trans>Open link</Trans>} />
|
||||
</a>
|
||||
</Group>
|
||||
|
||||
<ActionButton
|
||||
icon={<TbArrowBarToDown size={18} />}
|
||||
label={<Trans>Mark as read up to here</Trans>}
|
||||
onClick={async () => await dispatch(markEntriesUpToEntry(props.entry))}
|
||||
/>
|
||||
</Group>
|
||||
)
|
||||
}
|
||||
import { Trans, t } from "@lingui/macro"
|
||||
import { Group, Indicator, Popover, TagsInput } from "@mantine/core"
|
||||
import { markEntriesUpToEntry, markEntry, starEntry, tagEntry } from "app/entries/thunks"
|
||||
import { useAppDispatch, useAppSelector } from "app/store"
|
||||
import type { Entry } from "app/types"
|
||||
import { ActionButton } from "components/ActionButton"
|
||||
import { useActionButton } from "hooks/useActionButton"
|
||||
import { useMobile } from "hooks/useMobile"
|
||||
import { TbArrowBarToDown, TbExternalLink, TbEyeCheck, TbEyeOff, TbShare, TbStar, TbStarOff, TbTag } from "react-icons/tb"
|
||||
import { ShareButtons } from "./ShareButtons"
|
||||
|
||||
interface FeedEntryFooterProps {
|
||||
entry: Entry
|
||||
}
|
||||
|
||||
export function FeedEntryFooter(props: FeedEntryFooterProps) {
|
||||
const tags = useAppSelector(state => state.user.tags)
|
||||
const mobile = useMobile()
|
||||
const { spacing } = useActionButton()
|
||||
const dispatch = useAppDispatch()
|
||||
|
||||
const readStatusButtonClicked = async () =>
|
||||
await dispatch(
|
||||
markEntry({
|
||||
entry: props.entry,
|
||||
read: !props.entry.read,
|
||||
})
|
||||
)
|
||||
const onTagsChange = async (values: string[]) =>
|
||||
await dispatch(
|
||||
tagEntry({
|
||||
entryId: +props.entry.id,
|
||||
tags: values,
|
||||
})
|
||||
)
|
||||
|
||||
return (
|
||||
<Group justify="space-between">
|
||||
<Group gap={spacing}>
|
||||
{props.entry.markable && (
|
||||
<ActionButton
|
||||
icon={props.entry.read ? <TbEyeOff size={18} /> : <TbEyeCheck size={18} />}
|
||||
label={props.entry.read ? <Trans>Keep unread</Trans> : <Trans>Mark as read</Trans>}
|
||||
onClick={readStatusButtonClicked}
|
||||
/>
|
||||
)}
|
||||
<ActionButton
|
||||
icon={props.entry.starred ? <TbStarOff size={18} /> : <TbStar size={18} />}
|
||||
label={props.entry.starred ? <Trans>Unstar</Trans> : <Trans>Star</Trans>}
|
||||
onClick={async () =>
|
||||
await dispatch(
|
||||
starEntry({
|
||||
entry: props.entry,
|
||||
starred: !props.entry.starred,
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
|
||||
<Popover withArrow withinPortal shadow="md" closeOnClickOutside={!mobile}>
|
||||
<Popover.Target>
|
||||
<ActionButton icon={<TbShare size={18} />} label={<Trans>Share</Trans>} />
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown>
|
||||
<ShareButtons url={props.entry.url} description={props.entry.title} />
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
|
||||
{tags && (
|
||||
<Popover withArrow shadow="md" closeOnClickOutside={!mobile}>
|
||||
<Popover.Target>
|
||||
<Indicator label={props.entry.tags.length} disabled={props.entry.tags.length === 0} inline size={16}>
|
||||
<ActionButton icon={<TbTag size={18} />} label={<Trans>Tags</Trans>} />
|
||||
</Indicator>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown>
|
||||
<TagsInput
|
||||
placeholder={t`Tags`}
|
||||
data={tags}
|
||||
value={props.entry.tags}
|
||||
onChange={onTagsChange}
|
||||
comboboxProps={{
|
||||
withinPortal: false,
|
||||
}}
|
||||
/>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
)}
|
||||
|
||||
<a href={props.entry.url} target="_blank" rel="noreferrer">
|
||||
<ActionButton icon={<TbExternalLink size={18} />} label={<Trans>Open link</Trans>} />
|
||||
</a>
|
||||
</Group>
|
||||
|
||||
<ActionButton
|
||||
icon={<TbArrowBarToDown size={18} />}
|
||||
label={<Trans>Mark as read up to here</Trans>}
|
||||
onClick={async () => await dispatch(markEntriesUpToEntry(props.entry))}
|
||||
/>
|
||||
</Group>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
|
||||
|
||||
export interface FeedFaviconProps {
|
||||
url: string
|
||||
size?: number
|
||||
}
|
||||
|
||||
export function FeedFavicon({ url, size = 18 }: FeedFaviconProps) {
|
||||
return (
|
||||
<ImageWithPlaceholderWhileLoading
|
||||
src={url}
|
||||
alt="feed favicon"
|
||||
width={size}
|
||||
height={size}
|
||||
placeholderWidth={size}
|
||||
placeholderHeight={size}
|
||||
placeholderBackgroundColor="inherit"
|
||||
placeholderIconSize={size}
|
||||
/>
|
||||
)
|
||||
}
|
||||
import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
|
||||
|
||||
export interface FeedFaviconProps {
|
||||
url: string
|
||||
size?: number
|
||||
}
|
||||
|
||||
export function FeedFavicon({ url, size = 18 }: FeedFaviconProps) {
|
||||
return (
|
||||
<ImageWithPlaceholderWhileLoading
|
||||
src={url}
|
||||
alt="feed favicon"
|
||||
width={size}
|
||||
height={size}
|
||||
placeholderWidth={size}
|
||||
placeholderHeight={size}
|
||||
placeholderBackgroundColor="inherit"
|
||||
placeholderIconSize={size}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,40 +1,40 @@
|
||||
import { Box } from "@mantine/core"
|
||||
import { Constants } from "app/constants"
|
||||
import { calculatePlaceholderSize } from "app/utils"
|
||||
import { BasicHtmlStyles } from "components/content/BasicHtmlStyles"
|
||||
import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
|
||||
import { Content } from "./Content"
|
||||
|
||||
export interface MediaProps {
|
||||
thumbnailUrl: string
|
||||
thumbnailWidth?: number
|
||||
thumbnailHeight?: number
|
||||
description?: string
|
||||
}
|
||||
|
||||
export function Media(props: MediaProps) {
|
||||
const width = props.thumbnailWidth
|
||||
const height = props.thumbnailHeight
|
||||
const placeholderSize = calculatePlaceholderSize({
|
||||
width,
|
||||
height,
|
||||
maxWidth: Constants.layout.entryMaxWidth,
|
||||
})
|
||||
return (
|
||||
<BasicHtmlStyles>
|
||||
<ImageWithPlaceholderWhileLoading
|
||||
src={props.thumbnailUrl}
|
||||
alt="media thumbnail"
|
||||
width={props.thumbnailWidth}
|
||||
height={props.thumbnailHeight}
|
||||
placeholderWidth={placeholderSize.width}
|
||||
placeholderHeight={placeholderSize.height}
|
||||
/>
|
||||
{props.description && (
|
||||
<Box pt="md">
|
||||
<Content content={props.description} />
|
||||
</Box>
|
||||
)}
|
||||
</BasicHtmlStyles>
|
||||
)
|
||||
}
|
||||
import { Box } from "@mantine/core"
|
||||
import { Constants } from "app/constants"
|
||||
import { calculatePlaceholderSize } from "app/utils"
|
||||
import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
|
||||
import { BasicHtmlStyles } from "components/content/BasicHtmlStyles"
|
||||
import { Content } from "./Content"
|
||||
|
||||
export interface MediaProps {
|
||||
thumbnailUrl: string
|
||||
thumbnailWidth?: number
|
||||
thumbnailHeight?: number
|
||||
description?: string
|
||||
}
|
||||
|
||||
export function Media(props: MediaProps) {
|
||||
const width = props.thumbnailWidth
|
||||
const height = props.thumbnailHeight
|
||||
const placeholderSize = calculatePlaceholderSize({
|
||||
width,
|
||||
height,
|
||||
maxWidth: Constants.layout.entryMaxWidth,
|
||||
})
|
||||
return (
|
||||
<BasicHtmlStyles>
|
||||
<ImageWithPlaceholderWhileLoading
|
||||
src={props.thumbnailUrl}
|
||||
alt="media thumbnail"
|
||||
width={props.thumbnailWidth}
|
||||
height={props.thumbnailHeight}
|
||||
placeholderWidth={placeholderSize.width}
|
||||
placeholderHeight={placeholderSize.height}
|
||||
/>
|
||||
{props.description && (
|
||||
<Box pt="md">
|
||||
<Content content={props.description} />
|
||||
</Box>
|
||||
)}
|
||||
</BasicHtmlStyles>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,113 +1,113 @@
|
||||
import { Trans } from "@lingui/macro"
|
||||
import { ActionIcon, Box, CopyButton, Divider, SimpleGrid } from "@mantine/core"
|
||||
import { Constants } from "app/constants"
|
||||
import { useAppSelector } from "app/store"
|
||||
import { type SharingSettings } from "app/types"
|
||||
import { useBrowserExtension } from "hooks/useBrowserExtension"
|
||||
import { useMobile } from "hooks/useMobile"
|
||||
import { type IconType } from "react-icons"
|
||||
import { TbCheck, TbCopy, TbDeviceDesktopShare, TbDeviceMobileShare } from "react-icons/tb"
|
||||
import { tss } from "tss"
|
||||
|
||||
type Color = `#${string}`
|
||||
|
||||
const useStyles = tss
|
||||
.withParams<{
|
||||
color: Color
|
||||
}>()
|
||||
.create(({ theme, colorScheme, color }) => ({
|
||||
icon: {
|
||||
color,
|
||||
backgroundColor: colorScheme === "dark" ? theme.colors.gray[2] : "white",
|
||||
},
|
||||
}))
|
||||
|
||||
function ShareButton({ icon, color, onClick }: { icon: IconType; color: Color; onClick: () => void }) {
|
||||
const { classes } = useStyles({
|
||||
color,
|
||||
})
|
||||
|
||||
return (
|
||||
<ActionIcon variant="transparent" radius="xl" size={32}>
|
||||
<Box p={6} className={classes.icon} onClick={onClick}>
|
||||
{icon({ size: 18 })}
|
||||
</Box>
|
||||
</ActionIcon>
|
||||
)
|
||||
}
|
||||
|
||||
function SiteShareButton({ url, icon, color }: { icon: IconType; color: Color; url: string }) {
|
||||
const onClick = () => {
|
||||
window.open(url, "", "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=800,height=600")
|
||||
}
|
||||
|
||||
return <ShareButton icon={icon} color={color} onClick={onClick} />
|
||||
}
|
||||
|
||||
function CopyUrlButton({ url }: { url: string }) {
|
||||
return (
|
||||
<CopyButton value={url}>
|
||||
{({ copied, copy }) => <ShareButton icon={copied ? TbCheck : TbCopy} color="#000" onClick={copy} />}
|
||||
</CopyButton>
|
||||
)
|
||||
}
|
||||
|
||||
function BrowserNativeShareButton({ url, description }: { url: string; description: string }) {
|
||||
const mobile = useMobile()
|
||||
const { isBrowserExtensionPopup } = useBrowserExtension()
|
||||
const onClick = () => {
|
||||
navigator.share({
|
||||
title: description,
|
||||
url,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<ShareButton
|
||||
icon={mobile && !isBrowserExtensionPopup ? TbDeviceMobileShare : TbDeviceDesktopShare}
|
||||
color="#000"
|
||||
onClick={onClick}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export function ShareButtons(props: { url: string; description: string }) {
|
||||
const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
|
||||
const enabledSharingSites = (Object.keys(Constants.sharing) as Array<keyof SharingSettings>).filter(site => sharingSettings?.[site])
|
||||
const url = encodeURIComponent(props.url)
|
||||
const desc = encodeURIComponent(props.description)
|
||||
const clipboardAvailable = typeof navigator.clipboard !== "undefined"
|
||||
const nativeSharingAvailable = typeof navigator.share !== "undefined"
|
||||
const showNativeSection = clipboardAvailable || nativeSharingAvailable
|
||||
const showSharingSites = enabledSharingSites.length > 0
|
||||
const showDivider = showNativeSection && showSharingSites
|
||||
const showNoSharingOptionsAvailable = !showNativeSection && !showSharingSites
|
||||
|
||||
return (
|
||||
<>
|
||||
{showNativeSection && (
|
||||
<SimpleGrid cols={4}>
|
||||
{clipboardAvailable && <CopyUrlButton url={props.url} />}
|
||||
{nativeSharingAvailable && <BrowserNativeShareButton url={props.url} description={props.description} />}
|
||||
</SimpleGrid>
|
||||
)}
|
||||
|
||||
{showDivider && <Divider my="xs" />}
|
||||
|
||||
{showSharingSites && (
|
||||
<SimpleGrid cols={4}>
|
||||
{enabledSharingSites.map(site => (
|
||||
<SiteShareButton
|
||||
key={site}
|
||||
icon={Constants.sharing[site].icon}
|
||||
color={Constants.sharing[site].color}
|
||||
url={Constants.sharing[site].url(url, desc)}
|
||||
/>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
)}
|
||||
|
||||
{showNoSharingOptionsAvailable && <Trans>No sharing options available.</Trans>}
|
||||
</>
|
||||
)
|
||||
}
|
||||
import { Trans } from "@lingui/macro"
|
||||
import { ActionIcon, Box, CopyButton, Divider, SimpleGrid } from "@mantine/core"
|
||||
import { Constants } from "app/constants"
|
||||
import { useAppSelector } from "app/store"
|
||||
import type { SharingSettings } from "app/types"
|
||||
import { useBrowserExtension } from "hooks/useBrowserExtension"
|
||||
import { useMobile } from "hooks/useMobile"
|
||||
import type { IconType } from "react-icons"
|
||||
import { TbCheck, TbCopy, TbDeviceDesktopShare, TbDeviceMobileShare } from "react-icons/tb"
|
||||
import { tss } from "tss"
|
||||
|
||||
type Color = `#${string}`
|
||||
|
||||
const useStyles = tss
|
||||
.withParams<{
|
||||
color: Color
|
||||
}>()
|
||||
.create(({ theme, colorScheme, color }) => ({
|
||||
icon: {
|
||||
color,
|
||||
backgroundColor: colorScheme === "dark" ? theme.colors.gray[2] : "white",
|
||||
},
|
||||
}))
|
||||
|
||||
function ShareButton({ icon, color, onClick }: { icon: IconType; color: Color; onClick: () => void }) {
|
||||
const { classes } = useStyles({
|
||||
color,
|
||||
})
|
||||
|
||||
return (
|
||||
<ActionIcon variant="transparent" radius="xl" size={32}>
|
||||
<Box p={6} className={classes.icon} onClick={onClick}>
|
||||
{icon({ size: 18 })}
|
||||
</Box>
|
||||
</ActionIcon>
|
||||
)
|
||||
}
|
||||
|
||||
function SiteShareButton({ url, icon, color }: { icon: IconType; color: Color; url: string }) {
|
||||
const onClick = () => {
|
||||
window.open(url, "", "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=800,height=600")
|
||||
}
|
||||
|
||||
return <ShareButton icon={icon} color={color} onClick={onClick} />
|
||||
}
|
||||
|
||||
function CopyUrlButton({ url }: { url: string }) {
|
||||
return (
|
||||
<CopyButton value={url}>
|
||||
{({ copied, copy }) => <ShareButton icon={copied ? TbCheck : TbCopy} color="#000" onClick={copy} />}
|
||||
</CopyButton>
|
||||
)
|
||||
}
|
||||
|
||||
function BrowserNativeShareButton({ url, description }: { url: string; description: string }) {
|
||||
const mobile = useMobile()
|
||||
const { isBrowserExtensionPopup } = useBrowserExtension()
|
||||
const onClick = () => {
|
||||
navigator.share({
|
||||
title: description,
|
||||
url,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<ShareButton
|
||||
icon={mobile && !isBrowserExtensionPopup ? TbDeviceMobileShare : TbDeviceDesktopShare}
|
||||
color="#000"
|
||||
onClick={onClick}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export function ShareButtons(props: { url: string; description: string }) {
|
||||
const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
|
||||
const enabledSharingSites = (Object.keys(Constants.sharing) as Array<keyof SharingSettings>).filter(site => sharingSettings?.[site])
|
||||
const url = encodeURIComponent(props.url)
|
||||
const desc = encodeURIComponent(props.description)
|
||||
const clipboardAvailable = typeof navigator.clipboard !== "undefined"
|
||||
const nativeSharingAvailable = typeof navigator.share !== "undefined"
|
||||
const showNativeSection = clipboardAvailable || nativeSharingAvailable
|
||||
const showSharingSites = enabledSharingSites.length > 0
|
||||
const showDivider = showNativeSection && showSharingSites
|
||||
const showNoSharingOptionsAvailable = !showNativeSection && !showSharingSites
|
||||
|
||||
return (
|
||||
<>
|
||||
{showNativeSection && (
|
||||
<SimpleGrid cols={4}>
|
||||
{clipboardAvailable && <CopyUrlButton url={props.url} />}
|
||||
{nativeSharingAvailable && <BrowserNativeShareButton url={props.url} description={props.description} />}
|
||||
</SimpleGrid>
|
||||
)}
|
||||
|
||||
{showDivider && <Divider my="xs" />}
|
||||
|
||||
{showSharingSites && (
|
||||
<SimpleGrid cols={4}>
|
||||
{enabledSharingSites.map(site => (
|
||||
<SiteShareButton
|
||||
key={site}
|
||||
icon={Constants.sharing[site].icon}
|
||||
color={Constants.sharing[site].color}
|
||||
url={Constants.sharing[site].url(url, desc)}
|
||||
/>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
)}
|
||||
|
||||
{showNoSharingOptionsAvailable && <Trans>No sharing options available.</Trans>}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,50 +1,50 @@
|
||||
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/redirect/thunks"
|
||||
import { useAppDispatch } from "app/store"
|
||||
import { reloadTree } from "app/tree/thunks"
|
||||
import { type AddCategoryRequest } from "app/types"
|
||||
import { Alert } from "components/Alert"
|
||||
import { useAsyncCallback } from "react-async-hook"
|
||||
import { TbFolderPlus } from "react-icons/tb"
|
||||
import { CategorySelect } from "./CategorySelect"
|
||||
|
||||
export function AddCategory() {
|
||||
const dispatch = useAppDispatch()
|
||||
|
||||
const form = useForm<AddCategoryRequest>()
|
||||
|
||||
const addCategory = useAsyncCallback(client.category.add, {
|
||||
onSuccess: () => {
|
||||
dispatch(reloadTree())
|
||||
dispatch(redirectToSelectedSource())
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<>
|
||||
{addCategory.error && (
|
||||
<Box mb="md">
|
||||
<Alert messages={errorToStrings(addCategory.error)} />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<form onSubmit={form.onSubmit(addCategory.execute)}>
|
||||
<Stack>
|
||||
<TextInput label={<Trans>Category</Trans>} placeholder={t`Category`} {...form.getInputProps("name")} required />
|
||||
<CategorySelect label={<Trans>Parent</Trans>} {...form.getInputProps("parentId")} clearable />
|
||||
<Group justify="center">
|
||||
<Button variant="default" onClick={async () => await dispatch(redirectToSelectedSource())}>
|
||||
<Trans>Cancel</Trans>
|
||||
</Button>
|
||||
<Button type="submit" leftSection={<TbFolderPlus size={16} />} loading={addCategory.loading}>
|
||||
<Trans>Add</Trans>
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</form>
|
||||
</>
|
||||
)
|
||||
}
|
||||
import { Trans, t } 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/redirect/thunks"
|
||||
import { useAppDispatch } from "app/store"
|
||||
import { reloadTree } from "app/tree/thunks"
|
||||
import type { AddCategoryRequest } from "app/types"
|
||||
import { Alert } from "components/Alert"
|
||||
import { useAsyncCallback } from "react-async-hook"
|
||||
import { TbFolderPlus } from "react-icons/tb"
|
||||
import { CategorySelect } from "./CategorySelect"
|
||||
|
||||
export function AddCategory() {
|
||||
const dispatch = useAppDispatch()
|
||||
|
||||
const form = useForm<AddCategoryRequest>()
|
||||
|
||||
const addCategory = useAsyncCallback(client.category.add, {
|
||||
onSuccess: () => {
|
||||
dispatch(reloadTree())
|
||||
dispatch(redirectToSelectedSource())
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<>
|
||||
{addCategory.error && (
|
||||
<Box mb="md">
|
||||
<Alert messages={errorToStrings(addCategory.error)} />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<form onSubmit={form.onSubmit(addCategory.execute)}>
|
||||
<Stack>
|
||||
<TextInput label={<Trans>Category</Trans>} placeholder={t`Category`} {...form.getInputProps("name")} required />
|
||||
<CategorySelect label={<Trans>Parent</Trans>} {...form.getInputProps("parentId")} clearable />
|
||||
<Group justify="center">
|
||||
<Button variant="default" onClick={async () => await dispatch(redirectToSelectedSource())}>
|
||||
<Trans>Cancel</Trans>
|
||||
</Button>
|
||||
<Button type="submit" leftSection={<TbFolderPlus size={16} />} loading={addCategory.loading}>
|
||||
<Trans>Add</Trans>
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</form>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,51 +1,52 @@
|
||||
import { t } from "@lingui/macro"
|
||||
import { Select, type SelectProps } from "@mantine/core"
|
||||
import { type ComboboxItem } from "@mantine/core/lib/components/Combobox/Combobox.types"
|
||||
import { Constants } from "app/constants"
|
||||
import { useAppSelector } from "app/store"
|
||||
import { type Category } from "app/types"
|
||||
import { flattenCategoryTree } from "app/utils"
|
||||
|
||||
type CategorySelectProps = Partial<SelectProps> & {
|
||||
withAll?: boolean
|
||||
withoutCategoryIds?: string[]
|
||||
}
|
||||
|
||||
export function CategorySelect(props: CategorySelectProps) {
|
||||
const rootCategory = useAppSelector(state => state.tree.rootCategory)
|
||||
const categories = rootCategory && flattenCategoryTree(rootCategory)
|
||||
const categoriesById = categories?.reduce((map, c) => {
|
||||
map.set(c.id, c)
|
||||
return map
|
||||
}, new Map<string, Category>())
|
||||
const categoryLabel = (cat: Category) => {
|
||||
let label = cat.name
|
||||
|
||||
while (cat.parentId) {
|
||||
const parent = categoriesById?.get(cat.parentId)
|
||||
if (!parent) {
|
||||
break
|
||||
}
|
||||
label = `${parent.name} → ${label}`
|
||||
cat = parent
|
||||
}
|
||||
|
||||
return label
|
||||
}
|
||||
const selectData: ComboboxItem[] | undefined = categories
|
||||
?.filter(c => c.id !== Constants.categories.all.id)
|
||||
.filter(c => !props.withoutCategoryIds?.includes(c.id))
|
||||
.map(c => ({
|
||||
label: categoryLabel(c),
|
||||
value: c.id,
|
||||
}))
|
||||
.sort((c1, c2) => c1.label.localeCompare(c2.label))
|
||||
if (props.withAll) {
|
||||
selectData?.unshift({
|
||||
label: t`All`,
|
||||
value: Constants.categories.all.id,
|
||||
})
|
||||
}
|
||||
|
||||
return <Select {...props} data={selectData ?? []} disabled={!selectData} />
|
||||
}
|
||||
import { t } from "@lingui/macro"
|
||||
import { Select, type SelectProps } from "@mantine/core"
|
||||
import type { ComboboxItem } from "@mantine/core/lib/components/Combobox/Combobox.types"
|
||||
import { Constants } from "app/constants"
|
||||
import { useAppSelector } from "app/store"
|
||||
import type { Category } from "app/types"
|
||||
import { flattenCategoryTree } from "app/utils"
|
||||
|
||||
type CategorySelectProps = Partial<SelectProps> & {
|
||||
withAll?: boolean
|
||||
withoutCategoryIds?: string[]
|
||||
}
|
||||
|
||||
export function CategorySelect(props: CategorySelectProps) {
|
||||
const rootCategory = useAppSelector(state => state.tree.rootCategory)
|
||||
const categories = rootCategory && flattenCategoryTree(rootCategory)
|
||||
const categoriesById = categories?.reduce((map, c) => {
|
||||
map.set(c.id, c)
|
||||
return map
|
||||
}, new Map<string, Category>())
|
||||
const categoryLabel = (category: Category) => {
|
||||
let cat = category
|
||||
let label = cat.name
|
||||
|
||||
while (cat.parentId) {
|
||||
const parent = categoriesById?.get(cat.parentId)
|
||||
if (!parent) {
|
||||
break
|
||||
}
|
||||
label = `${parent.name} → ${label}`
|
||||
cat = parent
|
||||
}
|
||||
|
||||
return label
|
||||
}
|
||||
const selectData: ComboboxItem[] | undefined = categories
|
||||
?.filter(c => c.id !== Constants.categories.all.id)
|
||||
.filter(c => !props.withoutCategoryIds?.includes(c.id))
|
||||
.map(c => ({
|
||||
label: categoryLabel(c),
|
||||
value: c.id,
|
||||
}))
|
||||
.sort((c1, c2) => c1.label.localeCompare(c2.label))
|
||||
if (props.withAll) {
|
||||
selectData?.unshift({
|
||||
label: t`All`,
|
||||
value: Constants.categories.all.id,
|
||||
})
|
||||
}
|
||||
|
||||
return <Select {...props} data={selectData ?? []} disabled={!selectData} />
|
||||
}
|
||||
|
||||
@@ -1,64 +1,64 @@
|
||||
import { t, Trans } from "@lingui/macro"
|
||||
import { Box, Button, FileInput, Group, Stack } from "@mantine/core"
|
||||
import { isNotEmpty, useForm } from "@mantine/form"
|
||||
import { client, errorToStrings } from "app/client"
|
||||
import { redirectToSelectedSource } from "app/redirect/thunks"
|
||||
import { useAppDispatch } from "app/store"
|
||||
import { reloadTree } from "app/tree/thunks"
|
||||
import { Alert } from "components/Alert"
|
||||
import { useAsyncCallback } from "react-async-hook"
|
||||
import { TbFileImport } from "react-icons/tb"
|
||||
|
||||
export function ImportOpml() {
|
||||
const dispatch = useAppDispatch()
|
||||
|
||||
const form = useForm<{ file: File }>({
|
||||
validate: {
|
||||
file: isNotEmpty(t`OPML file is required`),
|
||||
},
|
||||
})
|
||||
|
||||
const importOpml = useAsyncCallback(client.feed.importOpml, {
|
||||
onSuccess: () => {
|
||||
dispatch(reloadTree())
|
||||
dispatch(redirectToSelectedSource())
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<>
|
||||
{importOpml.error && (
|
||||
<Box mb="md">
|
||||
<Alert messages={errorToStrings(importOpml.error)} />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<form onSubmit={form.onSubmit(async v => await importOpml.execute(v.file))}>
|
||||
<Stack>
|
||||
<FileInput
|
||||
label={<Trans>OPML file</Trans>}
|
||||
leftSection={<TbFileImport />}
|
||||
placeholder={t`OPML file`}
|
||||
description={
|
||||
<Trans>
|
||||
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.
|
||||
</Trans>
|
||||
}
|
||||
{...form.getInputProps("file")}
|
||||
required
|
||||
accept=".xml,.opml"
|
||||
/>
|
||||
<Group justify="center">
|
||||
<Button variant="default" onClick={async () => await dispatch(redirectToSelectedSource())}>
|
||||
<Trans>Cancel</Trans>
|
||||
</Button>
|
||||
<Button type="submit" leftSection={<TbFileImport size={16} />} loading={importOpml.loading}>
|
||||
<Trans>Import</Trans>
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</form>
|
||||
</>
|
||||
)
|
||||
}
|
||||
import { Trans, t } from "@lingui/macro"
|
||||
import { Box, Button, FileInput, Group, Stack } from "@mantine/core"
|
||||
import { isNotEmpty, useForm } from "@mantine/form"
|
||||
import { client, errorToStrings } from "app/client"
|
||||
import { redirectToSelectedSource } from "app/redirect/thunks"
|
||||
import { useAppDispatch } from "app/store"
|
||||
import { reloadTree } from "app/tree/thunks"
|
||||
import { Alert } from "components/Alert"
|
||||
import { useAsyncCallback } from "react-async-hook"
|
||||
import { TbFileImport } from "react-icons/tb"
|
||||
|
||||
export function ImportOpml() {
|
||||
const dispatch = useAppDispatch()
|
||||
|
||||
const form = useForm<{ file: File }>({
|
||||
validate: {
|
||||
file: isNotEmpty(t`OPML file is required`),
|
||||
},
|
||||
})
|
||||
|
||||
const importOpml = useAsyncCallback(client.feed.importOpml, {
|
||||
onSuccess: () => {
|
||||
dispatch(reloadTree())
|
||||
dispatch(redirectToSelectedSource())
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<>
|
||||
{importOpml.error && (
|
||||
<Box mb="md">
|
||||
<Alert messages={errorToStrings(importOpml.error)} />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<form onSubmit={form.onSubmit(async v => await importOpml.execute(v.file))}>
|
||||
<Stack>
|
||||
<FileInput
|
||||
label={<Trans>OPML file</Trans>}
|
||||
leftSection={<TbFileImport />}
|
||||
placeholder={t`OPML file`}
|
||||
description={
|
||||
<Trans>
|
||||
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.
|
||||
</Trans>
|
||||
}
|
||||
{...form.getInputProps("file")}
|
||||
required
|
||||
accept=".xml,.opml"
|
||||
/>
|
||||
<Group justify="center">
|
||||
<Button variant="default" onClick={async () => await dispatch(redirectToSelectedSource())}>
|
||||
<Trans>Cancel</Trans>
|
||||
</Button>
|
||||
<Button type="submit" leftSection={<TbFileImport size={16} />} loading={importOpml.loading}>
|
||||
<Trans>Import</Trans>
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</form>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,129 +1,129 @@
|
||||
import { Trans } from "@lingui/macro"
|
||||
import { Box, Button, Group, Stack, Stepper, TextInput } from "@mantine/core"
|
||||
import { useForm } from "@mantine/form"
|
||||
import { client, errorToStrings } from "app/client"
|
||||
import { Constants } from "app/constants"
|
||||
import { redirectToFeed, redirectToSelectedSource } from "app/redirect/thunks"
|
||||
import { useAppDispatch } from "app/store"
|
||||
import { reloadTree } from "app/tree/thunks"
|
||||
import { type FeedInfoRequest, type SubscribeRequest } from "app/types"
|
||||
import { Alert } from "components/Alert"
|
||||
import { useState } from "react"
|
||||
import { useAsyncCallback } from "react-async-hook"
|
||||
import { TbRss } from "react-icons/tb"
|
||||
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.categories.all.id,
|
||||
},
|
||||
})
|
||||
|
||||
const fetchFeed = useAsyncCallback(client.feed.fetchFeed, {
|
||||
onSuccess: ({ data }) => {
|
||||
step1Form.setFieldValue("url", data.url)
|
||||
step1Form.setFieldValue("title", data.title)
|
||||
setActiveStep(step => step + 1)
|
||||
},
|
||||
})
|
||||
const subscribe = useAsyncCallback(client.feed.subscribe, {
|
||||
onSuccess: sub => {
|
||||
dispatch(reloadTree())
|
||||
dispatch(redirectToFeed(sub.data))
|
||||
},
|
||||
})
|
||||
|
||||
const previousStep = () => {
|
||||
if (activeStep === 0) {
|
||||
dispatch(redirectToSelectedSource())
|
||||
} else {
|
||||
setActiveStep(activeStep - 1)
|
||||
}
|
||||
}
|
||||
const nextStep = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
if (activeStep === 0) {
|
||||
step0Form.onSubmit(fetchFeed.execute)(e)
|
||||
} else if (activeStep === 1) {
|
||||
step1Form.onSubmit(subscribe.execute)(e)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{fetchFeed.error && (
|
||||
<Box mb="md">
|
||||
<Alert messages={errorToStrings(fetchFeed.error)} />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{subscribe.error && (
|
||||
<Box mb="md">
|
||||
<Alert messages={errorToStrings(subscribe.error)} />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<form onSubmit={nextStep}>
|
||||
<Stepper active={activeStep} onStepClick={setActiveStep}>
|
||||
<Stepper.Step
|
||||
label={<Trans>Analyze feed</Trans>}
|
||||
description={<Trans>Check that the feed is working</Trans>}
|
||||
allowStepSelect={activeStep === 1}
|
||||
>
|
||||
<TextInput
|
||||
label={<Trans>Feed URL</Trans>}
|
||||
placeholder="https://www.mysite.com/rss"
|
||||
description={
|
||||
<Trans>
|
||||
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.
|
||||
</Trans>
|
||||
}
|
||||
required
|
||||
autoFocus
|
||||
{...step0Form.getInputProps("url")}
|
||||
/>
|
||||
</Stepper.Step>
|
||||
<Stepper.Step
|
||||
label={<Trans>Subscribe</Trans>}
|
||||
description={<Trans>Subscribe to the feed</Trans>}
|
||||
allowStepSelect={false}
|
||||
>
|
||||
<Stack>
|
||||
<TextInput label={<Trans>Feed URL</Trans>} {...step1Form.getInputProps("url")} disabled />
|
||||
<TextInput label={<Trans>Feed name</Trans>} {...step1Form.getInputProps("title")} required autoFocus />
|
||||
<CategorySelect label={<Trans>Category</Trans>} {...step1Form.getInputProps("categoryId")} clearable />
|
||||
</Stack>
|
||||
</Stepper.Step>
|
||||
</Stepper>
|
||||
|
||||
<Group justify="center" mt="xl">
|
||||
<Button variant="default" onClick={previousStep}>
|
||||
<Trans>Back</Trans>
|
||||
</Button>
|
||||
{activeStep === 0 && (
|
||||
<Button type="submit" loading={fetchFeed.loading}>
|
||||
<Trans>Next</Trans>
|
||||
</Button>
|
||||
)}
|
||||
{activeStep === 1 && (
|
||||
<Button type="submit" leftSection={<TbRss size={16} />} loading={fetchFeed.loading || subscribe.loading}>
|
||||
<Trans>Subscribe</Trans>
|
||||
</Button>
|
||||
)}
|
||||
</Group>
|
||||
</form>
|
||||
</>
|
||||
)
|
||||
}
|
||||
import { Trans } from "@lingui/macro"
|
||||
import { Box, Button, Group, Stack, Stepper, TextInput } from "@mantine/core"
|
||||
import { useForm } from "@mantine/form"
|
||||
import { client, errorToStrings } from "app/client"
|
||||
import { Constants } from "app/constants"
|
||||
import { redirectToFeed, redirectToSelectedSource } from "app/redirect/thunks"
|
||||
import { useAppDispatch } from "app/store"
|
||||
import { reloadTree } from "app/tree/thunks"
|
||||
import type { FeedInfoRequest, SubscribeRequest } from "app/types"
|
||||
import { Alert } from "components/Alert"
|
||||
import { useState } from "react"
|
||||
import { useAsyncCallback } from "react-async-hook"
|
||||
import { TbRss } from "react-icons/tb"
|
||||
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.categories.all.id,
|
||||
},
|
||||
})
|
||||
|
||||
const fetchFeed = useAsyncCallback(client.feed.fetchFeed, {
|
||||
onSuccess: ({ data }) => {
|
||||
step1Form.setFieldValue("url", data.url)
|
||||
step1Form.setFieldValue("title", data.title)
|
||||
setActiveStep(step => step + 1)
|
||||
},
|
||||
})
|
||||
const subscribe = useAsyncCallback(client.feed.subscribe, {
|
||||
onSuccess: sub => {
|
||||
dispatch(reloadTree())
|
||||
dispatch(redirectToFeed(sub.data))
|
||||
},
|
||||
})
|
||||
|
||||
const previousStep = () => {
|
||||
if (activeStep === 0) {
|
||||
dispatch(redirectToSelectedSource())
|
||||
} else {
|
||||
setActiveStep(activeStep - 1)
|
||||
}
|
||||
}
|
||||
const nextStep = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
if (activeStep === 0) {
|
||||
step0Form.onSubmit(fetchFeed.execute)(e)
|
||||
} else if (activeStep === 1) {
|
||||
step1Form.onSubmit(subscribe.execute)(e)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{fetchFeed.error && (
|
||||
<Box mb="md">
|
||||
<Alert messages={errorToStrings(fetchFeed.error)} />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{subscribe.error && (
|
||||
<Box mb="md">
|
||||
<Alert messages={errorToStrings(subscribe.error)} />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<form onSubmit={nextStep}>
|
||||
<Stepper active={activeStep} onStepClick={setActiveStep}>
|
||||
<Stepper.Step
|
||||
label={<Trans>Analyze feed</Trans>}
|
||||
description={<Trans>Check that the feed is working</Trans>}
|
||||
allowStepSelect={activeStep === 1}
|
||||
>
|
||||
<TextInput
|
||||
label={<Trans>Feed URL</Trans>}
|
||||
placeholder="https://www.mysite.com/rss"
|
||||
description={
|
||||
<Trans>
|
||||
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.
|
||||
</Trans>
|
||||
}
|
||||
required
|
||||
autoFocus
|
||||
{...step0Form.getInputProps("url")}
|
||||
/>
|
||||
</Stepper.Step>
|
||||
<Stepper.Step
|
||||
label={<Trans>Subscribe</Trans>}
|
||||
description={<Trans>Subscribe to the feed</Trans>}
|
||||
allowStepSelect={false}
|
||||
>
|
||||
<Stack>
|
||||
<TextInput label={<Trans>Feed URL</Trans>} {...step1Form.getInputProps("url")} disabled />
|
||||
<TextInput label={<Trans>Feed name</Trans>} {...step1Form.getInputProps("title")} required autoFocus />
|
||||
<CategorySelect label={<Trans>Category</Trans>} {...step1Form.getInputProps("categoryId")} clearable />
|
||||
</Stack>
|
||||
</Stepper.Step>
|
||||
</Stepper>
|
||||
|
||||
<Group justify="center" mt="xl">
|
||||
<Button variant="default" onClick={previousStep}>
|
||||
<Trans>Back</Trans>
|
||||
</Button>
|
||||
{activeStep === 0 && (
|
||||
<Button type="submit" loading={fetchFeed.loading}>
|
||||
<Trans>Next</Trans>
|
||||
</Button>
|
||||
)}
|
||||
{activeStep === 1 && (
|
||||
<Button type="submit" leftSection={<TbRss size={16} />} loading={fetchFeed.loading || subscribe.loading}>
|
||||
<Trans>Subscribe</Trans>
|
||||
</Button>
|
||||
)}
|
||||
</Group>
|
||||
</form>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,72 +1,72 @@
|
||||
import { Box, Text } from "@mantine/core"
|
||||
import { type Entry } from "app/types"
|
||||
import { FeedFavicon } from "components/content/FeedFavicon"
|
||||
import { OpenExternalLink } from "components/content/header/OpenExternalLink"
|
||||
import { Star } from "components/content/header/Star"
|
||||
import { RelativeDate } from "components/RelativeDate"
|
||||
import { OnDesktop } from "components/responsive/OnDesktop"
|
||||
import { tss } from "tss"
|
||||
import { FeedEntryTitle } from "./FeedEntryTitle"
|
||||
|
||||
export interface FeedEntryHeaderProps {
|
||||
entry: Entry
|
||||
showStarIcon?: boolean
|
||||
showExternalLinkIcon?: boolean
|
||||
}
|
||||
|
||||
const useStyles = tss
|
||||
.withParams<{
|
||||
read: boolean
|
||||
}>()
|
||||
.create(({ colorScheme, read }) => ({
|
||||
wrapper: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
columnGap: "10px",
|
||||
},
|
||||
title: {
|
||||
flexGrow: 1,
|
||||
fontWeight: colorScheme === "light" && !read ? "bold" : "inherit",
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
},
|
||||
feedName: {
|
||||
width: "145px",
|
||||
minWidth: "145px",
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
},
|
||||
date: {
|
||||
whiteSpace: "nowrap",
|
||||
},
|
||||
}))
|
||||
|
||||
export function FeedEntryCompactHeader(props: FeedEntryHeaderProps) {
|
||||
const { classes } = useStyles({
|
||||
read: props.entry.read,
|
||||
})
|
||||
return (
|
||||
<Box className={classes.wrapper}>
|
||||
{props.showStarIcon && <Star entry={props.entry} />}
|
||||
<Box>
|
||||
<FeedFavicon url={props.entry.iconUrl} />
|
||||
</Box>
|
||||
<OnDesktop>
|
||||
<Text c="dimmed" className={classes.feedName}>
|
||||
{props.entry.feedName}
|
||||
</Text>
|
||||
</OnDesktop>
|
||||
<Box className={classes.title}>
|
||||
<FeedEntryTitle entry={props.entry} />
|
||||
</Box>
|
||||
<OnDesktop>
|
||||
<Text c="dimmed" className={classes.date}>
|
||||
<RelativeDate date={props.entry.date} />
|
||||
</Text>
|
||||
</OnDesktop>
|
||||
{props.showExternalLinkIcon && <OpenExternalLink entry={props.entry} />}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
import { Box, Text } from "@mantine/core"
|
||||
import type { Entry } from "app/types"
|
||||
import { RelativeDate } from "components/RelativeDate"
|
||||
import { FeedFavicon } from "components/content/FeedFavicon"
|
||||
import { OpenExternalLink } from "components/content/header/OpenExternalLink"
|
||||
import { Star } from "components/content/header/Star"
|
||||
import { OnDesktop } from "components/responsive/OnDesktop"
|
||||
import { tss } from "tss"
|
||||
import { FeedEntryTitle } from "./FeedEntryTitle"
|
||||
|
||||
export interface FeedEntryHeaderProps {
|
||||
entry: Entry
|
||||
showStarIcon?: boolean
|
||||
showExternalLinkIcon?: boolean
|
||||
}
|
||||
|
||||
const useStyles = tss
|
||||
.withParams<{
|
||||
read: boolean
|
||||
}>()
|
||||
.create(({ colorScheme, read }) => ({
|
||||
wrapper: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
columnGap: "10px",
|
||||
},
|
||||
title: {
|
||||
flexGrow: 1,
|
||||
fontWeight: colorScheme === "light" && !read ? "bold" : "inherit",
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
},
|
||||
feedName: {
|
||||
width: "145px",
|
||||
minWidth: "145px",
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
},
|
||||
date: {
|
||||
whiteSpace: "nowrap",
|
||||
},
|
||||
}))
|
||||
|
||||
export function FeedEntryCompactHeader(props: FeedEntryHeaderProps) {
|
||||
const { classes } = useStyles({
|
||||
read: props.entry.read,
|
||||
})
|
||||
return (
|
||||
<Box className={classes.wrapper}>
|
||||
{props.showStarIcon && <Star entry={props.entry} />}
|
||||
<Box>
|
||||
<FeedFavicon url={props.entry.iconUrl} />
|
||||
</Box>
|
||||
<OnDesktop>
|
||||
<Text c="dimmed" className={classes.feedName}>
|
||||
{props.entry.feedName}
|
||||
</Text>
|
||||
</OnDesktop>
|
||||
<Box className={classes.title}>
|
||||
<FeedEntryTitle entry={props.entry} />
|
||||
</Box>
|
||||
<OnDesktop>
|
||||
<Text c="dimmed" className={classes.date}>
|
||||
<RelativeDate date={props.entry.date} />
|
||||
</Text>
|
||||
</OnDesktop>
|
||||
{props.showExternalLinkIcon && <OpenExternalLink entry={props.entry} />}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,67 +1,67 @@
|
||||
import { Box, Flex, Space, Text } from "@mantine/core"
|
||||
import { type Entry } from "app/types"
|
||||
import { FeedFavicon } from "components/content/FeedFavicon"
|
||||
import { OpenExternalLink } from "components/content/header/OpenExternalLink"
|
||||
import { Star } from "components/content/header/Star"
|
||||
import { RelativeDate } from "components/RelativeDate"
|
||||
import { tss } from "tss"
|
||||
import { FeedEntryTitle } from "./FeedEntryTitle"
|
||||
|
||||
export interface FeedEntryHeaderProps {
|
||||
entry: Entry
|
||||
expanded: boolean
|
||||
showStarIcon?: boolean
|
||||
showExternalLinkIcon?: boolean
|
||||
}
|
||||
|
||||
const useStyles = tss
|
||||
.withParams<{
|
||||
read: boolean
|
||||
}>()
|
||||
.create(({ colorScheme, read }) => ({
|
||||
main: {
|
||||
fontWeight: colorScheme === "light" && !read ? "bold" : "inherit",
|
||||
},
|
||||
details: {
|
||||
fontSize: "90%",
|
||||
},
|
||||
}))
|
||||
|
||||
export function FeedEntryHeader(props: FeedEntryHeaderProps) {
|
||||
const { classes } = useStyles({
|
||||
read: props.entry.read,
|
||||
})
|
||||
return (
|
||||
<Box>
|
||||
<Flex align="flex-start" justify="space-between">
|
||||
<Flex align="flex-start" className={classes.main}>
|
||||
{props.showStarIcon && (
|
||||
<Box ml={-5}>
|
||||
<Star entry={props.entry} />
|
||||
</Box>
|
||||
)}
|
||||
<FeedEntryTitle entry={props.entry} />
|
||||
</Flex>
|
||||
{props.showExternalLinkIcon && <OpenExternalLink entry={props.entry} />}
|
||||
</Flex>
|
||||
<Flex align="center" className={classes.details}>
|
||||
<FeedFavicon url={props.entry.iconUrl} />
|
||||
<Space w={6} />
|
||||
<Text c="dimmed">
|
||||
{props.entry.feedName}
|
||||
<span> · </span>
|
||||
<RelativeDate date={props.entry.date} />
|
||||
</Text>
|
||||
</Flex>
|
||||
{props.expanded && (
|
||||
<Box className={classes.details}>
|
||||
<Text c="dimmed">
|
||||
{props.entry.author && <span>by {props.entry.author}</span>}
|
||||
{props.entry.author && props.entry.categories && <span> · </span>}
|
||||
{props.entry.categories && <span>{props.entry.categories}</span>}
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
import { Box, Flex, Space, Text } from "@mantine/core"
|
||||
import type { Entry } from "app/types"
|
||||
import { RelativeDate } from "components/RelativeDate"
|
||||
import { FeedFavicon } from "components/content/FeedFavicon"
|
||||
import { OpenExternalLink } from "components/content/header/OpenExternalLink"
|
||||
import { Star } from "components/content/header/Star"
|
||||
import { tss } from "tss"
|
||||
import { FeedEntryTitle } from "./FeedEntryTitle"
|
||||
|
||||
export interface FeedEntryHeaderProps {
|
||||
entry: Entry
|
||||
expanded: boolean
|
||||
showStarIcon?: boolean
|
||||
showExternalLinkIcon?: boolean
|
||||
}
|
||||
|
||||
const useStyles = tss
|
||||
.withParams<{
|
||||
read: boolean
|
||||
}>()
|
||||
.create(({ colorScheme, read }) => ({
|
||||
main: {
|
||||
fontWeight: colorScheme === "light" && !read ? "bold" : "inherit",
|
||||
},
|
||||
details: {
|
||||
fontSize: "90%",
|
||||
},
|
||||
}))
|
||||
|
||||
export function FeedEntryHeader(props: FeedEntryHeaderProps) {
|
||||
const { classes } = useStyles({
|
||||
read: props.entry.read,
|
||||
})
|
||||
return (
|
||||
<Box>
|
||||
<Flex align="flex-start" justify="space-between">
|
||||
<Flex align="flex-start" className={classes.main}>
|
||||
{props.showStarIcon && (
|
||||
<Box ml={-5}>
|
||||
<Star entry={props.entry} />
|
||||
</Box>
|
||||
)}
|
||||
<FeedEntryTitle entry={props.entry} />
|
||||
</Flex>
|
||||
{props.showExternalLinkIcon && <OpenExternalLink entry={props.entry} />}
|
||||
</Flex>
|
||||
<Flex align="center" className={classes.details}>
|
||||
<FeedFavicon url={props.entry.iconUrl} />
|
||||
<Space w={6} />
|
||||
<Text c="dimmed">
|
||||
{props.entry.feedName}
|
||||
<span> · </span>
|
||||
<RelativeDate date={props.entry.date} />
|
||||
</Text>
|
||||
</Flex>
|
||||
{props.expanded && (
|
||||
<Box className={classes.details}>
|
||||
<Text c="dimmed">
|
||||
{props.entry.author && <span>by {props.entry.author}</span>}
|
||||
{props.entry.author && props.entry.categories && <span> · </span>}
|
||||
{props.entry.categories && <span>{props.entry.categories}</span>}
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
import { Highlight } from "@mantine/core"
|
||||
import { useAppSelector } from "app/store"
|
||||
import { type Entry } from "app/types"
|
||||
|
||||
export interface FeedEntryTitleProps {
|
||||
entry: Entry
|
||||
}
|
||||
|
||||
export function FeedEntryTitle(props: FeedEntryTitleProps) {
|
||||
const search = useAppSelector(state => state.entries.search)
|
||||
const keywords = search?.split(" ")
|
||||
return (
|
||||
<Highlight
|
||||
inherit
|
||||
highlight={keywords ?? ""}
|
||||
// make sure ellipsis is shown when title is too long
|
||||
span
|
||||
>
|
||||
{props.entry.title}
|
||||
</Highlight>
|
||||
)
|
||||
}
|
||||
import { Highlight } from "@mantine/core"
|
||||
import { useAppSelector } from "app/store"
|
||||
import type { Entry } from "app/types"
|
||||
|
||||
export interface FeedEntryTitleProps {
|
||||
entry: Entry
|
||||
}
|
||||
|
||||
export function FeedEntryTitle(props: FeedEntryTitleProps) {
|
||||
const search = useAppSelector(state => state.entries.search)
|
||||
const keywords = search?.split(" ")
|
||||
return (
|
||||
<Highlight
|
||||
inherit
|
||||
highlight={keywords ?? ""}
|
||||
// make sure ellipsis is shown when title is too long
|
||||
span
|
||||
>
|
||||
{props.entry.title}
|
||||
</Highlight>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
import { Trans } from "@lingui/macro"
|
||||
import { ActionIcon, Anchor, Tooltip } from "@mantine/core"
|
||||
import { Constants } from "app/constants"
|
||||
import { markEntry } from "app/entries/thunks"
|
||||
import { useAppDispatch } from "app/store"
|
||||
import { type Entry } from "app/types"
|
||||
import { TbExternalLink } from "react-icons/tb"
|
||||
|
||||
export function OpenExternalLink(props: { entry: Entry }) {
|
||||
const dispatch = useAppDispatch()
|
||||
const onClick = (e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
dispatch(
|
||||
markEntry({
|
||||
entry: props.entry,
|
||||
read: true,
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Anchor href={props.entry.url} target="_blank" rel="noreferrer" onClick={onClick}>
|
||||
<Tooltip label={<Trans>Open link</Trans>} openDelay={Constants.tooltip.delay}>
|
||||
<ActionIcon variant="transparent" c="dimmed">
|
||||
<TbExternalLink size={18} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Anchor>
|
||||
)
|
||||
}
|
||||
import { Trans } from "@lingui/macro"
|
||||
import { ActionIcon, Anchor, Tooltip } from "@mantine/core"
|
||||
import { Constants } from "app/constants"
|
||||
import { markEntry } from "app/entries/thunks"
|
||||
import { useAppDispatch } from "app/store"
|
||||
import type { Entry } from "app/types"
|
||||
import { TbExternalLink } from "react-icons/tb"
|
||||
|
||||
export function OpenExternalLink(props: { entry: Entry }) {
|
||||
const dispatch = useAppDispatch()
|
||||
const onClick = (e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
dispatch(
|
||||
markEntry({
|
||||
entry: props.entry,
|
||||
read: true,
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Anchor href={props.entry.url} target="_blank" rel="noreferrer" onClick={onClick}>
|
||||
<Tooltip label={<Trans>Open link</Trans>} openDelay={Constants.tooltip.delay}>
|
||||
<ActionIcon variant="transparent" c="dimmed">
|
||||
<TbExternalLink size={18} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Anchor>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,29 +1,29 @@
|
||||
import { Trans } from "@lingui/macro"
|
||||
import { ActionIcon, Tooltip } from "@mantine/core"
|
||||
import { Constants } from "app/constants"
|
||||
import { starEntry } from "app/entries/thunks"
|
||||
import { useAppDispatch } from "app/store"
|
||||
import type { Entry } from "app/types"
|
||||
import { TbStar, TbStarFilled } from "react-icons/tb"
|
||||
|
||||
export function Star(props: { entry: Entry }) {
|
||||
const dispatch = useAppDispatch()
|
||||
const onClick = (e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
dispatch(
|
||||
starEntry({
|
||||
entry: props.entry,
|
||||
starred: !props.entry.starred,
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Tooltip label={props.entry.starred ? <Trans>Unstar</Trans> : <Trans>Star</Trans>} openDelay={Constants.tooltip.delay}>
|
||||
<ActionIcon variant="transparent" onClick={onClick}>
|
||||
{props.entry.starred ? <TbStarFilled size={18} /> : <TbStar size={18} />}
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
import { Trans } from "@lingui/macro"
|
||||
import { ActionIcon, Tooltip } from "@mantine/core"
|
||||
import { Constants } from "app/constants"
|
||||
import { starEntry } from "app/entries/thunks"
|
||||
import { useAppDispatch } from "app/store"
|
||||
import type { Entry } from "app/types"
|
||||
import { TbStar, TbStarFilled } from "react-icons/tb"
|
||||
|
||||
export function Star(props: { entry: Entry }) {
|
||||
const dispatch = useAppDispatch()
|
||||
const onClick = (e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
dispatch(
|
||||
starEntry({
|
||||
entry: props.entry,
|
||||
starred: !props.entry.starred,
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Tooltip label={props.entry.starred ? <Trans>Unstar</Trans> : <Trans>Star</Trans>} openDelay={Constants.tooltip.delay}>
|
||||
<ActionIcon variant="transparent" onClick={onClick}>
|
||||
{props.entry.starred ? <TbStarFilled size={18} /> : <TbStar size={18} />}
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user