From d6514e1c8d3d0e5bd6891d82c1cfe321d34431a7 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Mon, 19 Feb 2024 15:16:24 +0800 Subject: [PATCH] Add missing files --- .../components/elements/icons/DragIcon.tsx | 73 +++++++ .../components/elements/icons/HomeIcon.tsx | 29 +++ packages/web/pages/settings/shortcuts.tsx | 203 ++++++++++++++++++ 3 files changed, 305 insertions(+) create mode 100644 packages/web/components/elements/icons/DragIcon.tsx create mode 100644 packages/web/components/elements/icons/HomeIcon.tsx create mode 100644 packages/web/pages/settings/shortcuts.tsx diff --git a/packages/web/components/elements/icons/DragIcon.tsx b/packages/web/components/elements/icons/DragIcon.tsx new file mode 100644 index 000000000..f40c0316b --- /dev/null +++ b/packages/web/components/elements/icons/DragIcon.tsx @@ -0,0 +1,73 @@ +/* eslint-disable functional/no-class */ +/* eslint-disable functional/no-this-expression */ +import { IconProps } from './IconProps' + +import React from 'react' + +export class DragIcon 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/HomeIcon.tsx b/packages/web/components/elements/icons/HomeIcon.tsx new file mode 100644 index 000000000..0f9e7ce0d --- /dev/null +++ b/packages/web/components/elements/icons/HomeIcon.tsx @@ -0,0 +1,29 @@ +/* eslint-disable functional/no-class */ +/* eslint-disable functional/no-this-expression */ +import { IconProps } from './IconProps' + +import React from 'react' + +export class HomeIcon extends React.Component { + render() { + const size = (this.props.size || 26).toString() + const color = (this.props.color || '#2A2A2A').toString() + + return ( + + + + + + ) + } +} diff --git a/packages/web/pages/settings/shortcuts.tsx b/packages/web/pages/settings/shortcuts.tsx new file mode 100644 index 000000000..bbb7ab543 --- /dev/null +++ b/packages/web/pages/settings/shortcuts.tsx @@ -0,0 +1,203 @@ +import { useMemo, useState } from 'react' +import { applyStoredTheme } from '../../lib/themeUpdater' + +import { useGetLabelsQuery } from '../../lib/networking/queries/useGetLabelsQuery' +import { useGetSavedSearchQuery } from '../../lib/networking/queries/useGetSavedSearchQuery' +import { SettingsLayout } from '../../components/templates/SettingsLayout' +import { Toaster } from 'react-hot-toast' +import { + Box, + VStack, + HStack, + SpanBox, +} from '../../components/elements/LayoutPrimitives' +import { LabelChip } from '../../components/elements/LabelChip' +import { Checkbox } from '@radix-ui/react-checkbox' +import { StyledText } from '../../components/elements/StyledText' +import { useGetSubscriptionsQuery } from '../../lib/networking/queries/useGetSubscriptionsQuery' +import { DragIcon } from '../../components/elements/icons/DragIcon' +import { CoverImage } from '../../components/elements/CoverImage' + +export default function Shortcuts(): JSX.Element { + applyStoredTheme() + + return ( + + + + + + + + + + + + ) +} + +const AvailableItems = (): JSX.Element => { + const { labels } = useGetLabelsQuery() + const { savedSearches } = useGetSavedSearchQuery() + const { subscriptions } = useGetSubscriptionsQuery() + + console.log('subscriptions:', subscriptions) + + const sortedLabels = useMemo(() => { + if (!labels) { + return [] + } + return labels.sort((a, b) => + a.name.toLocaleLowerCase().localeCompare(b.name.toLocaleLowerCase()) + ) + }, [labels]) + + const sortedSubscriptions = useMemo(() => { + if (!subscriptions) { + return [] + } + return subscriptions.sort((a, b) => + a.name.toLocaleLowerCase().localeCompare(b.name.toLocaleLowerCase()) + ) + }, [subscriptions]) + + const sortedsavedSearches = useMemo(() => { + if (!savedSearches) { + return [] + } + return savedSearches.sort((a, b) => + a.name.toLocaleLowerCase().localeCompare(b.name.toLocaleLowerCase()) + ) + }, [savedSearches]) + return ( + + Saved Searches + {sortedsavedSearches?.map((search) => { + return ( + + {search.name} + + + + + ) + })} + Labels + {sortedLabels.map((label) => { + return ( + + + + + + + ) + })} + Subscriptions + {sortedSubscriptions.map((subscription) => { + return ( + + {subscription.name} + + + + + ) + })} + + ) +} + +type Shortcut = { + name: string + icon: string + filter: string + type: 'search' | 'label' | 'newsletter' | 'feed' +} + +const SelectedItems = (): JSX.Element => { + const shortcuts = [ + { + id: '12asdfasdf', + name: 'Omnivore Blog', + icon: 'https://substackcdn.com/image/fetch/w_256,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F052c15c4-ecfd-4d32-87db-13bcac9afad5_512x512.png', + filter: 'subscription:"Money Talk"', + type: 'newsletter', + }, + ] + + return ( + + Shortcuts + {shortcuts.map((shortcut) => { + return ( + + + {shortcut.name} + + + + + ) + })} + + ) +}