Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Add web version of the header

+150
+150
src/view/com/util/ViewHeader.web.tsx
··· 1 + import React from 'react' 2 + import {observer} from 'mobx-react-lite' 3 + import { 4 + ActivityIndicator, 5 + StyleSheet, 6 + TouchableOpacity, 7 + View, 8 + } from 'react-native' 9 + import { 10 + FontAwesomeIcon, 11 + FontAwesomeIconStyle, 12 + } from '@fortawesome/react-native-fontawesome' 13 + import {CenteredView} from './Views' 14 + import {Text} from './text/Text' 15 + import {useStores} from '../../../state' 16 + import {usePalette} from '../../lib/hooks/usePalette' 17 + import {colors} from '../../lib/styles' 18 + 19 + const BACK_HITSLOP = {left: 10, top: 10, right: 30, bottom: 10} 20 + 21 + export const ViewHeader = observer(function ViewHeader({ 22 + title, 23 + subtitle, 24 + canGoBack, 25 + }: { 26 + title: string 27 + subtitle?: string 28 + canGoBack?: boolean 29 + }) { 30 + const pal = usePalette('default') 31 + const store = useStores() 32 + const onPressBack = () => { 33 + store.nav.tab.goBack() 34 + } 35 + const onPressReconnect = () => { 36 + store.session.connect().catch(e => { 37 + store.log.warn('Failed to reconnect to server', e) 38 + }) 39 + } 40 + if (typeof canGoBack === 'undefined') { 41 + canGoBack = store.nav.tab.canGoBack 42 + } 43 + return ( 44 + <CenteredView style={[styles.header, pal.view]}> 45 + {canGoBack ? ( 46 + <> 47 + <TouchableOpacity 48 + testID="viewHeaderBackOrMenuBtn" 49 + onPress={onPressBack} 50 + hitSlop={BACK_HITSLOP} 51 + style={styles.backBtn}> 52 + <FontAwesomeIcon 53 + size={18} 54 + icon="angle-left" 55 + style={[styles.backIcon, pal.text]} 56 + /> 57 + </TouchableOpacity> 58 + <View style={styles.titleContainer} pointerEvents="none"> 59 + <Text type="title" style={[pal.text, styles.title]}> 60 + {title} 61 + </Text> 62 + {subtitle ? ( 63 + <Text 64 + type="title-sm" 65 + style={[styles.subtitle, pal.textLight]} 66 + numberOfLines={1}> 67 + {subtitle} 68 + </Text> 69 + ) : undefined} 70 + </View> 71 + </> 72 + ) : ( 73 + <View style={styles.titleContainer} pointerEvents="none"> 74 + <Text type="title" style={[pal.text, styles.title]}> 75 + Home 76 + </Text> 77 + </View> 78 + )} 79 + {!store.session.online ? ( 80 + <TouchableOpacity style={styles.btn} onPress={onPressReconnect}> 81 + {store.session.attemptingConnect ? ( 82 + <ActivityIndicator /> 83 + ) : ( 84 + <> 85 + <FontAwesomeIcon 86 + icon="signal" 87 + style={pal.text as FontAwesomeIconStyle} 88 + size={16} 89 + /> 90 + <FontAwesomeIcon 91 + icon="x" 92 + style={[ 93 + styles.littleXIcon, 94 + {backgroundColor: pal.colors.background}, 95 + ]} 96 + size={8} 97 + /> 98 + </> 99 + )} 100 + </TouchableOpacity> 101 + ) : undefined} 102 + </CenteredView> 103 + ) 104 + }) 105 + 106 + const styles = StyleSheet.create({ 107 + header: { 108 + flexDirection: 'row', 109 + alignItems: 'center', 110 + paddingHorizontal: 16, 111 + paddingVertical: 12, 112 + }, 113 + 114 + titleContainer: { 115 + flexDirection: 'row', 116 + alignItems: 'baseline', 117 + marginRight: 'auto', 118 + }, 119 + title: { 120 + fontWeight: 'bold', 121 + }, 122 + subtitle: { 123 + marginLeft: 4, 124 + maxWidth: 200, 125 + fontWeight: 'normal', 126 + }, 127 + 128 + backBtn: { 129 + width: 30, 130 + }, 131 + backIcon: { 132 + position: 'relative', 133 + top: -1, 134 + }, 135 + btn: { 136 + flexDirection: 'row', 137 + alignItems: 'center', 138 + justifyContent: 'center', 139 + width: 36, 140 + height: 36, 141 + borderRadius: 20, 142 + marginLeft: 4, 143 + }, 144 + littleXIcon: { 145 + color: colors.red3, 146 + position: 'absolute', 147 + right: 7, 148 + bottom: 7, 149 + }, 150 + })