diff --git a/src/view/com/discover/SuggestedFollows.tsx b/src/view/com/discover/SuggestedFollows.tsx index f2dc0ce4..9ed89314 100644 --- a/src/view/com/discover/SuggestedFollows.tsx +++ b/src/view/com/discover/SuggestedFollows.tsx @@ -1,7 +1,6 @@ import React, {useEffect, useState} from 'react' import { ActivityIndicator, - FlatList, StyleSheet, TouchableOpacity, View, @@ -13,6 +12,7 @@ import { } from '@fortawesome/react-native-fontawesome' import {observer} from 'mobx-react-lite' import _omit from 'lodash.omit' +import {CenteredView, FlatList} from '../util/Views' import {ErrorScreen} from '../util/error/ErrorScreen' import {Link} from '../util/Link' import {Text} from '../util/text/Text' @@ -120,12 +120,14 @@ export const SuggestedFollows = observer( return ( {view.hasError ? ( - + + + ) : view.isEmpty ? ( ) : ( diff --git a/src/view/com/util/BlurView.web.tsx b/src/view/com/util/BlurView.web.tsx index 5adf0d1c..7e4300c7 100644 --- a/src/view/com/util/BlurView.web.tsx +++ b/src/view/com/util/BlurView.web.tsx @@ -24,10 +24,6 @@ export const BlurView = ({ } const styles = StyleSheet.create({ - blur: { - // @ts-ignore using an RNW-specific attribute here -prf - backdropFilter: 'blur(5px)', - }, dark: { backgroundColor: '#0008', }, diff --git a/src/view/lib/icons.tsx b/src/view/lib/icons.tsx index f4224ea2..64292ca3 100644 --- a/src/view/lib/icons.tsx +++ b/src/view/lib/icons.tsx @@ -47,9 +47,11 @@ export function GridIconSolid({style}: {style?: StyleProp}) { export function HomeIcon({ style, size, + strokeWidth = 4, }: { style?: StyleProp size?: string | number + strokeWidth?: number }) { return ( diff --git a/src/view/screens/Search.tsx b/src/view/screens/Search.tsx index 95297222..2a1caab8 100644 --- a/src/view/screens/Search.tsx +++ b/src/view/screens/Search.tsx @@ -1,13 +1,13 @@ import React, {useEffect, useState, useMemo, useRef} from 'react' import { Keyboard, - ScrollView, StyleSheet, TextInput, TouchableOpacity, View, } from 'react-native' import {ViewHeader} from '../com/util/ViewHeader' +import {CenteredView, ScrollView} from '../com/util/Views' import {SuggestedFollows} from '../com/discover/SuggestedFollows' import {UserAvatar} from '../com/util/UserAvatar' import {Text} from '../com/util/text/Text' @@ -54,7 +54,7 @@ export const Search = ({navIdx, visible, params}: ScreenParams) => { return ( - + { style={[pal.text, styles.input]} onChangeText={onChangeQuery} /> - + {query ? ( diff --git a/src/view/shell/web/index.tsx b/src/view/shell/web/index.tsx index c7bfeff1..93ae9282 100644 --- a/src/view/shell/web/index.tsx +++ b/src/view/shell/web/index.tsx @@ -3,7 +3,7 @@ import {observer} from 'mobx-react-lite' import {View, StyleSheet, Text} from 'react-native' import {useStores} from '../../../state' import {match, MatchResult} from '../../routes' -// import {DesktopLeftColumn} from './left-column' +import {DesktopLeftColumn} from './left-column' // import {DesktopRightColumn} from './right-column' import {Login} from '../../screens/Login' import {ErrorBoundary} from '../../com/util/ErrorBoundary' @@ -34,6 +34,7 @@ export const WebShell: React.FC = observer(() => { ))} + ) // TODO diff --git a/src/view/shell/web/left-column.tsx b/src/view/shell/web/left-column.tsx index 3ce6c2ec..b7309d9c 100644 --- a/src/view/shell/web/left-column.tsx +++ b/src/view/shell/web/left-column.tsx @@ -1,57 +1,115 @@ import React from 'react' -import {View} from 'react-native' +import {Pressable, StyleSheet, View} from 'react-native' +import {observer} from 'mobx-react-lite' +import {Link} from '../../com/util/Link' +import {Text} from '../../com/util/text/Text' +import {colors} from '../../lib/styles' +import {useStores} from '../../../state' +import {usePalette} from '../../lib/hooks/usePalette' +import { + HomeIcon, + HomeIconSolid, + BellIcon, + BellIconSolid, + MagnifyingGlassIcon, + CogIcon, +} from '../../lib/icons' -// export const NavItem: React.FC<{label: string; screen: string}> = ({ -// label, -// screen, -// }) => { -// const Link = <> // TODO -// return ( -// -// [ -// // @ts-ignore it does exist! (react-native-web) -prf -// state.hovered && styles.navItemHovered, -// ]}> -// -// {label} -// -// -// -// ) -// } - -export const DesktopLeftColumn: React.FC = () => { - // TODO - return - // return ( - // - // - // - // - // - // ) +interface NavItemProps { + label: string + count?: number + href: string + icon: JSX.Element + iconFilled: JSX.Element } +export const NavItem = observer( + ({label, count, href, icon, iconFilled}: NavItemProps) => { + const store = useStores() + const pal = usePalette('default') + const isCurrent = store.nav.tab.current.url === href + return ( + [ + // @ts-ignore Pressable state differs for RNW -prf + state.hovered && {backgroundColor: pal.colors.backgroundLight}, + ]}> + + + {isCurrent ? iconFilled : icon} + {typeof count === 'number' && count > 0 && ( + + {count} + + )} + + {label} + + + ) + }, +) -// const styles = StyleSheet.create({ -// container: { -// position: 'absolute', -// left: 'calc(50vw - 500px)', -// width: '200px', -// height: '100%', -// }, -// navItemHovered: { -// backgroundColor: 'gray', -// }, -// navItemLink: { -// padding: '1rem', -// }, -// navItemLinkSelected: { -// color: 'blue', -// }, -// }) +export const DesktopLeftColumn = observer(() => { + const store = useStores() + const pal = usePalette('default') + return ( + + } + iconFilled={} + /> + } + iconFilled={} + /> + } + iconFilled={} + /> + } + iconFilled={} + /> + + ) +}) + +const styles = StyleSheet.create({ + container: { + position: 'absolute', + left: 'calc(50vw - 500px)', + width: '200px', + height: '100%', + borderRightWidth: 1, + }, + navItem: { + padding: '1rem', + flexDirection: 'row', + alignItems: 'center', + }, + navItemIconWrapper: { + flexDirection: 'row', + width: 30, + justifyContent: 'center', + marginRight: 5, + }, + navItemCount: { + position: 'absolute', + top: -5, + left: 15, + backgroundColor: colors.red3, + color: colors.white, + fontSize: 12, + paddingHorizontal: 4, + borderRadius: 4, + }, +})