diff --git a/packages/web/components/elements/SplitButton.tsx b/packages/web/components/elements/SplitButton.tsx
new file mode 100644
index 000000000..ce6df2b67
--- /dev/null
+++ b/packages/web/components/elements/SplitButton.tsx
@@ -0,0 +1,67 @@
+import { ReactNode, useEffect, useMemo, useRef } from 'react'
+import { styled } from '../tokens/stitches.config'
+import { Box, HStack, VStack } from './LayoutPrimitives'
+import { Button } from './Button'
+import { DropdownMenu } from '@radix-ui/react-dropdown-menu'
+import { ArrowDown } from 'phosphor-react'
+import { Dropdown, DropdownOption } from './DropdownElements'
+import { CaretDownIcon } from './icons/CaretDownIcon'
+
+type SplitButtonProps = {
+ title: string
+}
+
+const CaretButton = (): JSX.Element => {
+ return (
+
+
+
+ )
+}
+
+export const SplitButton = (props: SplitButtonProps): JSX.Element => {
+ return (
+
+
+ {/* */}
+ }>
+ console.log()} title="Archive (e)" />
+
+
+ )
+}
diff --git a/packages/web/components/elements/icons/FollowingIcon.tsx b/packages/web/components/elements/icons/FollowingIcon.tsx
new file mode 100644
index 000000000..ef882dce2
--- /dev/null
+++ b/packages/web/components/elements/icons/FollowingIcon.tsx
@@ -0,0 +1,44 @@
+/* eslint-disable functional/no-class */
+/* eslint-disable functional/no-this-expression */
+import { IconProps } from './IconProps'
+
+import React from 'react'
+
+export class FollowingIcon extends React.Component {
+ render() {
+ const size = (this.props.size || 26).toString()
+ const color = (this.props.color || '#2A2A2A').toString()
+
+ return (
+
+ )
+ }
+}
diff --git a/packages/web/components/elements/icons/HeaderCheckboxIcon.tsx b/packages/web/components/elements/icons/HeaderCheckboxIcon.tsx
new file mode 100644
index 000000000..28620284f
--- /dev/null
+++ b/packages/web/components/elements/icons/HeaderCheckboxIcon.tsx
@@ -0,0 +1,40 @@
+/* eslint-disable functional/no-class */
+/* eslint-disable functional/no-this-expression */
+import { IconProps } from './IconProps'
+
+import React from 'react'
+
+export class HeaderCheckboxIcon extends React.Component {
+ render() {
+ const size = (this.props.size || 26).toString()
+ const color = (this.props.color || '#2A2A2A').toString()
+
+ return (
+
+ )
+ }
+}
diff --git a/packages/web/components/elements/icons/HeaderSearchIcon.tsx b/packages/web/components/elements/icons/HeaderSearchIcon.tsx
new file mode 100644
index 000000000..e26a1811e
--- /dev/null
+++ b/packages/web/components/elements/icons/HeaderSearchIcon.tsx
@@ -0,0 +1,47 @@
+/* eslint-disable functional/no-class */
+/* eslint-disable functional/no-this-expression */
+import { IconProps } from './IconProps'
+
+import React from 'react'
+
+export class HeaderSearchIcon extends React.Component {
+ render() {
+ const size = (this.props.size || 26).toString()
+ const color = (this.props.color || '#2A2A2A').toString()
+
+ return (
+
+ )
+ }
+}
diff --git a/packages/web/components/elements/icons/HeaderToggleGridIcon.tsx b/packages/web/components/elements/icons/HeaderToggleGridIcon.tsx
new file mode 100644
index 000000000..636a0e6fc
--- /dev/null
+++ b/packages/web/components/elements/icons/HeaderToggleGridIcon.tsx
@@ -0,0 +1,61 @@
+/* eslint-disable functional/no-class */
+/* eslint-disable functional/no-this-expression */
+import { IconProps } from './IconProps'
+
+import React from 'react'
+
+export class HeaderToggleGridIcon extends React.Component {
+ render() {
+ const size = (this.props.size || 26).toString()
+ const color = (this.props.color || '#2A2A2A').toString()
+
+ return (
+
+ )
+ }
+}
diff --git a/packages/web/components/elements/icons/HeaderToggleListIcon.tsx b/packages/web/components/elements/icons/HeaderToggleListIcon.tsx
new file mode 100644
index 000000000..44ac56613
--- /dev/null
+++ b/packages/web/components/elements/icons/HeaderToggleListIcon.tsx
@@ -0,0 +1,47 @@
+/* eslint-disable functional/no-class */
+/* eslint-disable functional/no-this-expression */
+import { IconProps } from './IconProps'
+
+import React from 'react'
+
+export class HeaderToggleListIcon extends React.Component {
+ render() {
+ const size = (this.props.size || 26).toString()
+ const color = (this.props.color || '#2A2A2A').toString()
+
+ return (
+
+ )
+ }
+}
diff --git a/packages/web/components/elements/icons/HighlightsIcon.tsx b/packages/web/components/elements/icons/HighlightsIcon.tsx
new file mode 100644
index 000000000..ef882dce2
--- /dev/null
+++ b/packages/web/components/elements/icons/HighlightsIcon.tsx
@@ -0,0 +1,44 @@
+/* eslint-disable functional/no-class */
+/* eslint-disable functional/no-this-expression */
+import { IconProps } from './IconProps'
+
+import React from 'react'
+
+export class FollowingIcon extends React.Component {
+ render() {
+ const size = (this.props.size || 26).toString()
+ const color = (this.props.color || '#2A2A2A').toString()
+
+ return (
+
+ )
+ }
+}
diff --git a/packages/web/components/elements/icons/LibraryIcon.tsx b/packages/web/components/elements/icons/LibraryIcon.tsx
new file mode 100644
index 000000000..c3a24a013
--- /dev/null
+++ b/packages/web/components/elements/icons/LibraryIcon.tsx
@@ -0,0 +1,33 @@
+/* eslint-disable functional/no-class */
+/* eslint-disable functional/no-this-expression */
+import { IconProps } from './IconProps'
+
+import React from 'react'
+
+export class LibraryIcon extends React.Component {
+ render() {
+ const size = (this.props.size || 26).toString()
+ const color = (this.props.color || '#2A2A2A').toString()
+
+ return (
+
+ )
+ }
+}
diff --git a/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx b/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx
index c229205fd..50efdebf8 100644
--- a/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx
+++ b/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx
@@ -22,8 +22,9 @@ export type Subscription = {
createdAt: string
updatedAt: string
lastFetchedAt?: string
- autoAddToLibrary?: boolean
- isPrivate?: boolean
+ mostRecentItemDate?: string
+
+ fetchContent?: boolean
}
type SubscriptionsQueryResponse = {
@@ -63,8 +64,8 @@ export function useGetSubscriptionsQuery(
createdAt
updatedAt
lastFetchedAt
- autoAddToLibrary
- isPrivate
+ fetchContent
+ mostRecentItemDate
}
}
... on SubscriptionsError {
diff --git a/packages/web/pages/settings/feeds/index.tsx b/packages/web/pages/settings/feeds/index.tsx
index 2570eb504..0935eda1d 100644
--- a/packages/web/pages/settings/feeds/index.tsx
+++ b/packages/web/pages/settings/feeds/index.tsx
@@ -2,7 +2,11 @@ import { useRouter } from 'next/router'
import { FloppyDisk, Pencil, XCircle } from 'phosphor-react'
import { useMemo, useState } from 'react'
import { FormInput } from '../../../components/elements/FormElements'
-import { HStack, SpanBox } from '../../../components/elements/LayoutPrimitives'
+import {
+ HStack,
+ SpanBox,
+ VStack,
+} from '../../../components/elements/LayoutPrimitives'
import { ConfirmationModal } from '../../../components/patterns/ConfirmationModal'
import {
EmptySettingsRow,
@@ -200,19 +204,25 @@ export default function Rss(): JSX.Element {
}}
deleteTitle="Unsubscribe"
sublineElement={
-
- {`URL: ${subscription.url}, `}
- {`Last fetched: ${
+ {`URL: ${subscription.url}`}
+ {`Last refreshed: ${
subscription.lastFetchedAt
? formattedDateTime(subscription.lastFetchedAt)
: 'Never'
- }`}
-
+ }`}
+
+ {subscription.mostRecentItemDate &&
+ `Most recent item: ${formattedDateTime(
+ subscription.mostRecentItemDate
+ )}`}
+
+
}
onClick={() => {
router.push(`/home?q=in:inbox rss:"${subscription.url}"`)