Add missing files
This commit is contained in:
Jackson Harper
73
packages/web/components/elements/icons/DragIcon.tsx
Normal file
73
packages/web/components/elements/icons/DragIcon.tsx
Normal file
@ -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<IconProps> {
|
||||
render() {
|
||||
const size = (this.props.size || 26).toString()
|
||||
const color = (this.props.color || '#2A2A2A').toString()
|
||||
|
||||
return (
|
||||
<svg
|
||||
width="21"
|
||||
height="21"
|
||||
viewBox="0 0 21 21"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
d="M3.84198 8.00234C3.84198 8.22335 3.92978 8.43531 4.08606 8.5916C4.24234 8.74788 4.4543 8.83567 4.67531 8.83567C4.89633 8.83567 5.10829 8.74788 5.26457 8.5916C5.42085 8.43531 5.50865 8.22335 5.50865 8.00234C5.50865 7.78133 5.42085 7.56936 5.26457 7.41308C5.10829 7.2568 4.89633 7.16901 4.67531 7.16901C4.4543 7.16901 4.24234 7.2568 4.08606 7.41308C3.92978 7.56936 3.84198 7.78133 3.84198 8.00234Z"
|
||||
fill="#D9D9D9"
|
||||
stroke="#D9D9D9"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M3.84198 13.0023C3.84198 13.2234 3.92978 13.4353 4.08606 13.5916C4.24234 13.7479 4.4543 13.8357 4.67531 13.8357C4.89633 13.8357 5.10829 13.7479 5.26457 13.5916C5.42085 13.4353 5.50865 13.2234 5.50865 13.0023C5.50865 12.7813 5.42085 12.5694 5.26457 12.4131C5.10829 12.2568 4.89633 12.169 4.67531 12.169C4.4543 12.169 4.24234 12.2568 4.08606 12.4131C3.92978 12.5694 3.84198 12.7813 3.84198 13.0023Z"
|
||||
fill="#D9D9D9"
|
||||
stroke="#D9D9D9"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.67535 8.00234C9.67535 8.22335 9.76315 8.43531 9.91943 8.5916C10.0757 8.74788 10.2877 8.83567 10.5087 8.83567C10.7297 8.83567 10.9417 8.74788 11.0979 8.5916C11.2542 8.43531 11.342 8.22335 11.342 8.00234C11.342 7.78133 11.2542 7.56936 11.0979 7.41308C10.9417 7.2568 10.7297 7.16901 10.5087 7.16901C10.2877 7.16901 10.0757 7.2568 9.91943 7.41308C9.76315 7.56936 9.67535 7.78133 9.67535 8.00234Z"
|
||||
fill="#D9D9D9"
|
||||
stroke="#D9D9D9"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.67535 13.0023C9.67535 13.2234 9.76315 13.4353 9.91943 13.5916C10.0757 13.7479 10.2877 13.8357 10.5087 13.8357C10.7297 13.8357 10.9417 13.7479 11.0979 13.5916C11.2542 13.4353 11.342 13.2234 11.342 13.0023C11.342 12.7813 11.2542 12.5694 11.0979 12.4131C10.9417 12.2568 10.7297 12.169 10.5087 12.169C10.2877 12.169 10.0757 12.2568 9.91943 12.4131C9.76315 12.5694 9.67535 12.7813 9.67535 13.0023Z"
|
||||
fill="#D9D9D9"
|
||||
stroke="#D9D9D9"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15.5087 8.00234C15.5087 8.22335 15.5965 8.43531 15.7527 8.5916C15.909 8.74788 16.121 8.83567 16.342 8.83567C16.563 8.83567 16.775 8.74788 16.9313 8.5916C17.0875 8.43531 17.1753 8.22335 17.1753 8.00234C17.1753 7.78133 17.0875 7.56936 16.9313 7.41308C16.775 7.2568 16.563 7.16901 16.342 7.16901C16.121 7.16901 15.909 7.2568 15.7527 7.41308C15.5965 7.56936 15.5087 7.78133 15.5087 8.00234Z"
|
||||
fill="#D9D9D9"
|
||||
stroke="#D9D9D9"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15.5087 13.0023C15.5087 13.2234 15.5965 13.4353 15.7527 13.5916C15.909 13.7479 16.121 13.8357 16.342 13.8357C16.563 13.8357 16.775 13.7479 16.9313 13.5916C17.0875 13.4353 17.1753 13.2234 17.1753 13.0023C17.1753 12.7813 17.0875 12.5694 16.9313 12.4131C16.775 12.2568 16.563 12.169 16.342 12.169C16.121 12.169 15.909 12.2568 15.7527 12.4131C15.5965 12.5694 15.5087 12.7813 15.5087 13.0023Z"
|
||||
fill="#D9D9D9"
|
||||
stroke="#D9D9D9"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
}
|
||||
29
packages/web/components/elements/icons/HomeIcon.tsx
Normal file
29
packages/web/components/elements/icons/HomeIcon.tsx
Normal file
@ -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<IconProps> {
|
||||
render() {
|
||||
const size = (this.props.size || 26).toString()
|
||||
const color = (this.props.color || '#2A2A2A').toString()
|
||||
|
||||
return (
|
||||
<svg
|
||||
width="26"
|
||||
height="26"
|
||||
viewBox="0 0 26 26"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
d="M19.9329 12.3418L12.7458 6.07813C12.3924 5.77033 11.8662 5.77093 11.514 6.07933L4.35753 12.3433C3.70713 12.9127 4.11003 13.984 4.97433 13.984C5.49123 13.984 5.91033 14.4031 5.91033 14.9203V20.3893C5.91033 20.9065 6.32973 21.3253 6.84663 21.3253H10.1271V16.5322C10.1271 16.2397 10.3638 16.003 10.656 16.003H13.6359C13.9281 16.003 14.1651 16.2397 14.1651 16.5322V21.3256H17.2806C17.7978 21.3256 18.2169 20.9068 18.2169 20.3896V14.9206C18.2169 14.4034 18.636 13.9843 19.1529 13.9843H19.3179C20.1831 13.9837 20.5854 12.9103 19.9329 12.3418Z"
|
||||
fill={color}
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
}
|
||||
203
packages/web/pages/settings/shortcuts.tsx
Normal file
203
packages/web/pages/settings/shortcuts.tsx
Normal file
@ -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 (
|
||||
<SettingsLayout>
|
||||
<Toaster
|
||||
containerStyle={{
|
||||
top: '5rem',
|
||||
}}
|
||||
/>
|
||||
<VStack
|
||||
css={{ width: '100%', height: '100%' }}
|
||||
distribution="start"
|
||||
alignment="center"
|
||||
>
|
||||
<VStack
|
||||
css={{
|
||||
padding: '24px',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
gap: '25px',
|
||||
minWidth: '300px',
|
||||
maxWidth: '880px',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
css={{
|
||||
py: '$3',
|
||||
display: 'grid',
|
||||
width: '100%',
|
||||
gridAutoRows: 'auto',
|
||||
borderRadius: '6px',
|
||||
gridGap: '40px',
|
||||
gridTemplateColumns: 'repeat(2, 1fr)',
|
||||
'@mdDown': {
|
||||
gridTemplateColumns: 'repeat(1, 1fr)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<SelectedItems />
|
||||
<AvailableItems />
|
||||
</Box>
|
||||
</VStack>
|
||||
</VStack>
|
||||
</SettingsLayout>
|
||||
)
|
||||
}
|
||||
|
||||
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 (
|
||||
<VStack
|
||||
css={{
|
||||
width: '420px',
|
||||
py: '30px',
|
||||
pl: '28px', // becomes labels have some margin built in
|
||||
pr: '30px',
|
||||
gap: '15px',
|
||||
bg: '$thLeftMenuBackground',
|
||||
}}
|
||||
>
|
||||
<StyledText style="settingsSection">Saved Searches</StyledText>
|
||||
{sortedsavedSearches?.map((search) => {
|
||||
return (
|
||||
<HStack css={{ width: '100%' }} key={`search-${search.id}`}>
|
||||
<StyledText style="settingsItem">{search.name}</StyledText>
|
||||
<SpanBox css={{ ml: 'auto' }}>
|
||||
<input type="checkbox" />
|
||||
</SpanBox>
|
||||
</HStack>
|
||||
)
|
||||
})}
|
||||
<StyledText style="settingsSection">Labels</StyledText>
|
||||
{sortedLabels.map((label) => {
|
||||
return (
|
||||
<HStack css={{ width: '100%' }} key={`label-${label.id}`}>
|
||||
<LabelChip text={label.name} color={label.color} />
|
||||
<SpanBox css={{ ml: 'auto' }}>
|
||||
<input type="checkbox" />
|
||||
</SpanBox>
|
||||
</HStack>
|
||||
)
|
||||
})}
|
||||
<StyledText style="settingsSection">Subscriptions</StyledText>
|
||||
{sortedSubscriptions.map((subscription) => {
|
||||
return (
|
||||
<HStack
|
||||
css={{ width: '100%' }}
|
||||
key={`subscription-${subscription.id}`}
|
||||
>
|
||||
<StyledText style="settingsItem">{subscription.name}</StyledText>
|
||||
<SpanBox css={{ ml: 'auto' }}>
|
||||
<input type="checkbox" />
|
||||
</SpanBox>
|
||||
</HStack>
|
||||
)
|
||||
})}
|
||||
</VStack>
|
||||
)
|
||||
}
|
||||
|
||||
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 (
|
||||
<VStack
|
||||
alignment="start"
|
||||
distribution="start"
|
||||
css={{
|
||||
width: '420px',
|
||||
py: '30px',
|
||||
pl: '28px', // becomes labels have some margin built in
|
||||
pr: '30px',
|
||||
gap: '15px',
|
||||
bg: '$thLeftMenuBackground',
|
||||
}}
|
||||
>
|
||||
<StyledText style="settingsSection">Shortcuts</StyledText>
|
||||
{shortcuts.map((shortcut) => {
|
||||
return (
|
||||
<HStack
|
||||
alignment="center"
|
||||
distribution="start"
|
||||
css={{ width: '100%', gap: '10px' }}
|
||||
key={`search-${shortcut.id}`}
|
||||
>
|
||||
<CoverImage src={shortcut.icon} width={20} height={20} />
|
||||
<StyledText style="settingsItem">{shortcut.name}</StyledText>
|
||||
<HStack css={{ ml: 'auto' }}>
|
||||
<DragIcon />
|
||||
</HStack>
|
||||
</HStack>
|
||||
)
|
||||
})}
|
||||
</VStack>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user