diff --git a/src/state/models/shell.ts b/src/state/models/shell.ts
index 0a07ce68..8cb0ff9e 100644
--- a/src/state/models/shell.ts
+++ b/src/state/models/shell.ts
@@ -2,14 +2,6 @@ import {makeAutoObservable} from 'mobx'
import {ProfileViewModel} from './profile-view'
import * as Post from '../../third-party/api/src/types/app/bsky/post'
-export class TabsSelectorModel {
- name = 'tabs-selector'
-
- constructor() {
- makeAutoObservable(this)
- }
-}
-
export interface LinkActionsModelOpts {
newTab?: boolean
}
@@ -62,7 +54,6 @@ export class EditProfileModel {
export class ShellModel {
isModalActive = false
activeModal:
- | TabsSelectorModel
| LinkActionsModel
| SharePostModel
| ComposePostModel
@@ -75,7 +66,6 @@ export class ShellModel {
openModal(
modal:
- | TabsSelectorModel
| LinkActionsModel
| SharePostModel
| ComposePostModel
diff --git a/src/view/com/modals/Modal.tsx b/src/view/com/modals/Modal.tsx
index f3a69d2a..6282b5af 100644
--- a/src/view/com/modals/Modal.tsx
+++ b/src/view/com/modals/Modal.tsx
@@ -7,7 +7,6 @@ import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop'
import * as models from '../../../state/models/shell'
-import * as TabsSelectorModal from './TabsSelector'
import * as LinkActionsModal from './LinkActions'
import * as SharePostModal from './SharePost.native'
import * as ComposePostModal from './ComposePost'
@@ -38,14 +37,7 @@ export const Modal = observer(function Modal() {
let snapPoints: (string | number)[] = CLOSED_SNAPPOINTS
let element
- if (store.shell.activeModal?.name === 'tabs-selector') {
- snapPoints = TabsSelectorModal.snapPoints
- element = (
-
- )
- } else if (store.shell.activeModal?.name === 'link-actions') {
+ if (store.shell.activeModal?.name === 'link-actions') {
snapPoints = LinkActionsModal.snapPoints
element = (
{
- const store = useStores()
- const [closingTabIndex, setClosingTabIndex] = useState(
- undefined,
- )
- const closeInterp = useSharedValue(0)
- const tabsRef = useRef(null)
- const tabRefs = useMemo(
- () =>
- Array.from({length: store.nav.tabs.length}).map(() =>
- createRef(),
- ),
- [store.nav.tabs.length],
- )
-
- // events
- // =
-
- const onPressNewTab = () => {
- store.nav.newTab('/')
- onClose()
- }
- const onPressCloneTab = () => {
- store.nav.newTab(store.nav.tab.current.url)
- onClose()
- }
- const onPressShareTab = () => {
- onClose()
- store.shell.openModal(
- new LinkActionsModel(
- store.nav.tab.current.url,
- store.nav.tab.current.title || 'This Page',
- {newTab: false},
- ),
- )
- }
- const onPressChangeTab = (tabIndex: number) => {
- store.nav.setActiveTab(tabIndex)
- onClose()
- }
- const doCloseTab = (index: number) => store.nav.closeTab(index)
- const onCloseTab = (tabIndex: number) => {
- setClosingTabIndex(tabIndex)
- closeInterp.value = 0
- closeInterp.value = withTiming(1, {duration: 300}, () => {
- runOnJS(setClosingTabIndex)(undefined)
- runOnJS(doCloseTab)(tabIndex)
- })
- }
- const onNavigate = (url: string) => {
- store.nav.navigate(url)
- onClose()
- }
- const onClose = () => {
- store.shell.closeModal()
- }
- const onLayout = () => {
- // focus the current tab
- const targetTab = tabRefs[store.nav.tabIndex]
- if (tabsRef.current && targetTab.current) {
- targetTab.current.measureLayout?.(
- tabsRef.current,
- (_left: number, top: number) => {
- tabsRef.current?.scrollTo({y: top, animated: false})
- },
- () => {},
- )
- }
- }
-
- // rendering
- // =
-
- const FatMenuItem = ({
- icon,
- label,
- url,
- gradient,
- }: {
- icon: IconProp
- label: string
- url: string
- gradient: keyof typeof gradients
- }) => (
- onNavigate(url)}>
-
-
-
-
- {label}
-
-
- )
-
- const renderSwipeActions = () => {
- return
- }
-
- const currentTabIndex = store.nav.tabIndex
- const closingTabAnimStyle = useAnimatedStyle(() => ({
- height: TAB_HEIGHT * (1 - closeInterp.value),
- opacity: 1 - closeInterp.value,
- marginBottom: 4 * (1 - closeInterp.value),
- }))
- return (
-
-
-
- onNavigate(`/profile/${store.me.name || ''}`)}>
-
-
- {store.me.displayName || store.me.name || 'My profile'}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Share
-
-
-
-
-
-
-
- Clone tab
-
-
-
-
-
-
-
- New tab
-
-
-
-
-
-
- {store.nav.tabs.map((tab, tabIndex) => {
- const {icon} = match(tab.current.url)
- const isActive = tabIndex === currentTabIndex
- const isClosing = closingTabIndex === tabIndex
- return (
- onCloseTab(tabIndex)}>
-
-
- onPressChangeTab(tabIndex)}>
-
-
-
-
-
- {tab.current.title || tab.current.url}
-
-
-
- onCloseTab(tabIndex)}>
-
-
-
-
-
-
-
- )
- })}
-
-
-
- )
-})
-
-const styles = StyleSheet.create({
- section: {
- borderBottomColor: colors.gray2,
- borderBottomWidth: 1,
- },
- sectionGrayBg: {
- backgroundColor: colors.gray1,
- },
- fatMenuItems: {
- flexDirection: 'row',
- marginTop: 10,
- marginBottom: 10,
- },
- fatMenuItem: {
- width: 80,
- alignItems: 'center',
- marginRight: 6,
- },
- fatMenuItemMargin: {
- marginRight: 14,
- },
- fatMenuItemIconWrapper: {
- borderRadius: 6,
- width: 60,
- height: 60,
- justifyContent: 'center',
- alignItems: 'center',
- marginBottom: 5,
- shadowColor: '#000',
- shadowOpacity: 0.2,
- shadowOffset: {width: 0, height: 2},
- shadowRadius: 2,
- },
- fatMenuItemIcon: {
- color: colors.white,
- },
- fatMenuImage: {
- borderRadius: 30,
- width: 60,
- height: 60,
- marginBottom: 5,
- },
- fatMenuItemLabel: {
- fontSize: 13,
- },
- tabs: {
- height: 240,
- },
- tabOuter: {
- height: TAB_HEIGHT + 4,
- overflow: 'hidden',
- },
- tab: {
- flexDirection: 'row',
- height: TAB_HEIGHT,
- backgroundColor: colors.gray1,
- alignItems: 'center',
- borderRadius: 4,
- },
- tabInner: {
- flexDirection: 'row',
- flex: 1,
- alignItems: 'center',
- paddingLeft: 12,
- paddingVertical: 12,
- },
- existing: {
- borderColor: colors.gray4,
- borderWidth: 1,
- },
- active: {
- backgroundColor: colors.white,
- borderColor: colors.black,
- borderWidth: 1,
- },
- tabIcon: {},
- tabText: {
- flex: 1,
- paddingHorizontal: 10,
- fontSize: 16,
- },
- tabTextActive: {
- fontWeight: '500',
- },
- tabClose: {
- paddingVertical: 16,
- paddingRight: 16,
- },
- tabCloseIcon: {
- color: '#655',
- },
- btns: {
- flexDirection: 'row',
- paddingTop: 2,
- },
- btn: {
- flexDirection: 'row',
- flex: 1,
- alignItems: 'center',
- justifyContent: 'center',
- backgroundColor: colors.gray1,
- borderRadius: 4,
- marginRight: 5,
- paddingLeft: 12,
- paddingRight: 16,
- paddingVertical: 10,
- },
- btnIcon: {
- marginRight: 8,
- },
- btnText: {
- fontWeight: '500',
- fontSize: 16,
- },
-})
diff --git a/src/view/shell/mobile/LocationNavigator.tsx b/src/view/shell/mobile/LocationNavigator.tsx
deleted file mode 100644
index 28ca2310..00000000
--- a/src/view/shell/mobile/LocationNavigator.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import React, {useState, useRef} from 'react'
-import {StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native'
-import LinearGradient from 'react-native-linear-gradient'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {IconProp} from '@fortawesome/fontawesome-svg-core'
-import {s, gradients, colors} from '../../lib/styles'
-
-export function LocationNavigator({
- url,
- onNavigate,
- onDismiss,
-}: {
- url: string
- onNavigate: (url: string) => void
- onDismiss: () => void
-}) {
- const [searchText, onChangeSearchText] = useState(url !== '/' ? url : '')
- const inputRef = useRef(null)
-
- const onFocusSearchText = () => {
- if (inputRef.current && searchText.length) {
- // select the text on focus
- inputRef.current.setNativeProps({
- selection: {start: 0, end: searchText.length},
- })
- }
- }
-
- const FatMenuItem = ({
- icon,
- label,
- url,
- gradient,
- }: {
- icon: IconProp
- label: string
- url: string
- gradient: keyof typeof gradients
- }) => (
- onNavigate(url)}>
-
-
-
- {label}
-
- )
-
- const ThinMenuItem = ({label, url}: {label: string; url: string}) => (
- onNavigate(url)}>
- {label}
-
- )
-
- return (
-
-
-
-
- onDismiss()}>
- Cancel
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
-}
-
-const styles = StyleSheet.create({
- menu: {
- position: 'absolute',
- left: 0,
- top: 0,
- width: '100%',
- height: '100%',
- backgroundColor: '#fff',
- opacity: 1,
- },
- searchContainer: {
- flexDirection: 'row',
- backgroundColor: colors.gray1,
- borderBottomWidth: 1,
- borderColor: colors.gray2,
- paddingHorizontal: 16,
- paddingTop: 48,
- paddingBottom: 8,
- },
- searchIcon: {
- color: colors.gray5,
- marginRight: 8,
- },
- searchInput: {
- flex: 1,
- },
- menuItemsContainer: {
- paddingVertical: 30,
- paddingHorizontal: 8,
- },
- fatMenuItems: {
- flexDirection: 'row',
- marginBottom: 20,
- },
- fatMenuItem: {
- width: 86,
- alignItems: 'center',
- marginRight: 6,
- },
- fatMenuItemIconWrapper: {
- borderRadius: 6,
- width: 50,
- height: 50,
- justifyContent: 'center',
- alignItems: 'center',
- marginBottom: 5,
- shadowColor: '#000',
- shadowOpacity: 0.2,
- shadowOffset: {width: 0, height: 2},
- shadowRadius: 2,
- },
- fatMenuItemIcon: {
- color: colors.white,
- },
- fatMenuItemLabel: {
- fontSize: 12,
- },
- thinMenuItems: {
- paddingHorizontal: 18,
- },
- thinMenuItem: {
- paddingVertical: 4,
- },
- thinMenuItemLabel: {
- color: colors.blue3,
- fontSize: 16,
- },
-})
diff --git a/src/view/shell/mobile/index.tsx b/src/view/shell/mobile/index.tsx
index cdac003f..7b5dd4e9 100644
--- a/src/view/shell/mobile/index.tsx
+++ b/src/view/shell/mobile/index.tsx
@@ -28,7 +28,6 @@ import {NavigationModel} from '../../../state/models/navigation'
import {match, MatchResult} from '../../routes'
import {Login} from '../../screens/Login'
import {Modal} from '../../com/modals/Modal'
-import {LocationNavigator} from './LocationNavigator'
import {MainMenu} from './MainMenu'
import {TabsSelector} from './TabsSelector'
import {s, colors} from '../../lib/styles'
@@ -99,7 +98,6 @@ const Btn = ({
export const MobileShell: React.FC = observer(() => {
const store = useStores()
- const [isLocationMenuActive, setLocationMenuActive] = useState(false)
const [isMainMenuActive, setMainMenuActive] = useState(false)
const [isTabsSelectorActive, setTabsSelectorActive] = useState(false)
const scrollElRef = useRef()
@@ -107,12 +105,6 @@ export const MobileShell: React.FC = observer(() => {
const swipeGestureInterp = useSharedValue(0)
const screenRenderDesc = constructScreenRenderDesc(store.nav)
- const onNavigateLocation = (url: string) => {
- setLocationMenuActive(false)
- store.nav.navigate(url)
- }
- const onDismissLocationNavigator = () => setLocationMenuActive(false)
-
const onPressHome = () => {
if (store.nav.tab.current.url === '/') {
scrollElRef.current?.scrollToOffset({offset: 0})
@@ -225,13 +217,6 @@ export const MobileShell: React.FC = observer(() => {
active={isTabsSelectorActive}
onClose={() => setTabsSelectorActive(false)}
/>
- {isLocationMenuActive && (
-
- )}
)
})