Remove old tabs selector modal

5 files changed, 1 insertions, 586 deletions

diff --git a/src/state/models/shell.ts b/src/state/models/shell.ts
index 0a07ce686..8cb0ff9e7 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 f3a69d2af..6282b5af1 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 = (
-      <TabsSelectorModal.Component
-        {...(store.shell.activeModal as models.TabsSelectorModel)}
-      />
-    )
-  } else if (store.shell.activeModal?.name === 'link-actions') {
+  if (store.shell.activeModal?.name === 'link-actions') {
     snapPoints = LinkActionsModal.snapPoints
     element = (
       <LinkActionsModal.Component
diff --git a/src/view/com/modals/TabsSelector.tsx b/src/view/com/modals/TabsSelector.tsx
deleted file mode 100644
index b4991cf74..000000000
--- a/src/view/com/modals/TabsSelector.tsx
+++ /dev/null
@@ -1,376 +0,0 @@
-import React, {createRef, useRef, useMemo, useState} from 'react'
-import {observer} from 'mobx-react-lite'
-import {
-  Image,
-  ScrollView,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native'
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withTiming,
-  runOnJS,
-} from 'react-native-reanimated'
-import {IconProp} from '@fortawesome/fontawesome-svg-core'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import Swipeable from 'react-native-gesture-handler/Swipeable'
-import LinearGradient from 'react-native-linear-gradient'
-import {useStores} from '../../../state'
-import {s, colors, gradients} from '../../lib/styles'
-import {DEF_AVATAR} from '../../lib/assets'
-import {match} from '../../routes'
-import {LinkActionsModel} from '../../../state/models/shell'
-
-const TAB_HEIGHT = 42
-
-export const snapPoints = [500]
-
-export const Component = observer(() => {
-  const store = useStores()
-  const [closingTabIndex, setClosingTabIndex] = useState<number | undefined>(
-    undefined,
-  )
-  const closeInterp = useSharedValue<number>(0)
-  const tabsRef = useRef<ScrollView>(null)
-  const tabRefs = useMemo(
-    () =>
-      Array.from({length: store.nav.tabs.length}).map(() =>
-        createRef<Animated.View>(),
-      ),
-    [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
-  }) => (
-    <TouchableOpacity
-      style={[styles.fatMenuItem, styles.fatMenuItemMargin]}
-      onPress={() => onNavigate(url)}>
-      <LinearGradient
-        style={[styles.fatMenuItemIconWrapper]}
-        colors={[gradients[gradient].start, gradients[gradient].end]}
-        start={{x: 0, y: 0}}
-        end={{x: 1, y: 1}}>
-        <FontAwesomeIcon icon={icon} style={styles.fatMenuItemIcon} size={24} />
-      </LinearGradient>
-      <Text style={styles.fatMenuItemLabel} numberOfLines={1}>
-        {label}
-      </Text>
-    </TouchableOpacity>
-  )
-
-  const renderSwipeActions = () => {
-    return <View style={[s.p2]} />
-  }
-
-  const currentTabIndex = store.nav.tabIndex
-  const closingTabAnimStyle = useAnimatedStyle(() => ({
-    height: TAB_HEIGHT * (1 - closeInterp.value),
-    opacity: 1 - closeInterp.value,
-    marginBottom: 4 * (1 - closeInterp.value),
-  }))
-  return (
-    <View onLayout={onLayout}>
-      <View style={[s.p10, styles.section]}>
-        <View style={styles.fatMenuItems}>
-          <TouchableOpacity
-            style={styles.fatMenuItem}
-            onPress={() => onNavigate(`/profile/${store.me.name || ''}`)}>
-            <Image style={styles.fatMenuImage} source={DEF_AVATAR} />
-            <Text style={styles.fatMenuItemLabel} numberOfLines={1}>
-              {store.me.displayName || store.me.name || 'My profile'}
-            </Text>
-          </TouchableOpacity>
-          <FatMenuItem icon="house" label="Feed" url="/" gradient="primary" />
-          <FatMenuItem
-            icon="bell"
-            label="Notifications"
-            url="/notifications"
-            gradient="purple"
-          />
-          <FatMenuItem
-            icon="gear"
-            label="Settings"
-            url="/settings"
-            gradient="blue"
-          />
-        </View>
-      </View>
-      <View style={[s.p10, styles.section]}>
-        <View style={styles.btns}>
-          <TouchableWithoutFeedback onPress={onPressShareTab}>
-            <View style={[styles.btn]}>
-              <View style={styles.btnIcon}>
-                <FontAwesomeIcon size={16} icon="share" />
-              </View>
-              <Text style={styles.btnText}>Share</Text>
-            </View>
-          </TouchableWithoutFeedback>
-          <TouchableWithoutFeedback onPress={onPressCloneTab}>
-            <View style={[styles.btn]}>
-              <View style={styles.btnIcon}>
-                <FontAwesomeIcon size={16} icon={['far', 'clone']} />
-              </View>
-              <Text style={styles.btnText}>Clone tab</Text>
-            </View>
-          </TouchableWithoutFeedback>
-          <TouchableWithoutFeedback onPress={onPressNewTab}>
-            <View style={[styles.btn]}>
-              <View style={styles.btnIcon}>
-                <FontAwesomeIcon size={16} icon="plus" />
-              </View>
-              <Text style={styles.btnText}>New tab</Text>
-            </View>
-          </TouchableWithoutFeedback>
-        </View>
-      </View>
-      <View style={[s.p10, styles.section, styles.sectionGrayBg]}>
-        <ScrollView ref={tabsRef} style={styles.tabs}>
-          {store.nav.tabs.map((tab, tabIndex) => {
-            const {icon} = match(tab.current.url)
-            const isActive = tabIndex === currentTabIndex
-            const isClosing = closingTabIndex === tabIndex
-            return (
-              <Swipeable
-                key={tab.id}
-                renderLeftActions={renderSwipeActions}
-                renderRightActions={renderSwipeActions}
-                leftThreshold={100}
-                rightThreshold={100}
-                onSwipeableWillOpen={() => onCloseTab(tabIndex)}>
-                <Animated.View
-                  style={[
-                    styles.tabOuter,
-                    isClosing ? closingTabAnimStyle : undefined,
-                  ]}>
-                  <Animated.View
-                    ref={tabRefs[tabIndex]}
-                    style={[
-                      styles.tab,
-                      styles.existing,
-                      isActive && styles.active,
-                    ]}>
-                    <TouchableWithoutFeedback
-                      onPress={() => onPressChangeTab(tabIndex)}>
-                      <View style={styles.tabInner}>
-                        <View style={styles.tabIcon}>
-                          <FontAwesomeIcon size={20} icon={icon} />
-                        </View>
-                        <Text
-                          ellipsizeMode="tail"
-                          numberOfLines={1}
-                          suppressHighlighting={true}
-                          style={[
-                            styles.tabText,
-                            isActive && styles.tabTextActive,
-                          ]}>
-                          {tab.current.title || tab.current.url}
-                        </Text>
-                      </View>
-                    </TouchableWithoutFeedback>
-                    <TouchableWithoutFeedback
-                      onPress={() => onCloseTab(tabIndex)}>
-                      <View style={styles.tabClose}>
-                        <FontAwesomeIcon
-                          size={14}
-                          icon="x"
-                          style={styles.tabCloseIcon}
-                        />
-                      </View>
-                    </TouchableWithoutFeedback>
-                  </Animated.View>
-                </Animated.View>
-              </Swipeable>
-            )
-          })}
-        </ScrollView>
-      </View>
-    </View>
-  )
-})
-
-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 28ca23101..000000000
--- 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<TextInput | null>(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
-  }) => (
-    <TouchableOpacity
-      style={styles.fatMenuItem}
-      onPress={() => onNavigate(url)}>
-      <LinearGradient
-        style={[styles.fatMenuItemIconWrapper]}
-        colors={[gradients[gradient].start, gradients[gradient].end]}
-        start={{x: 0, y: 0}}
-        end={{x: 1, y: 1}}>
-        <FontAwesomeIcon icon={icon} style={styles.fatMenuItemIcon} size={24} />
-      </LinearGradient>
-      <Text style={styles.fatMenuItemLabel}>{label}</Text>
-    </TouchableOpacity>
-  )
-
-  const ThinMenuItem = ({label, url}: {label: string; url: string}) => (
-    <TouchableOpacity
-      style={styles.thinMenuItem}
-      onPress={() => onNavigate(url)}>
-      <Text style={styles.thinMenuItemLabel}>{label}</Text>
-    </TouchableOpacity>
-  )
-
-  return (
-    <View style={styles.menu}>
-      <View style={styles.searchContainer}>
-        <FontAwesomeIcon
-          icon="magnifying-glass"
-          size={18}
-          style={styles.searchIcon}
-        />
-        <TextInput
-          autoFocus
-          ref={inputRef}
-          value={searchText}
-          style={styles.searchInput}
-          onChangeText={onChangeSearchText}
-          onFocus={onFocusSearchText}
-        />
-        <TouchableOpacity onPress={() => onDismiss()}>
-          <Text style={[s.blue3, s.f15]}>Cancel</Text>
-        </TouchableOpacity>
-      </View>
-      <View style={styles.menuItemsContainer}>
-        <View style={styles.fatMenuItems}>
-          <FatMenuItem icon="house" label="Feed" url="/" gradient="primary" />
-          <FatMenuItem
-            icon="bell"
-            label="Notifications"
-            url="/notifications"
-            gradient="purple"
-          />
-          <FatMenuItem
-            icon={['far', 'user']}
-            label="My Profile"
-            url="/"
-            gradient="blue"
-          />
-          <FatMenuItem icon="gear" label="Settings" url="/" gradient="blue" />
-        </View>
-        <View style={styles.thinMenuItems}>
-          <ThinMenuItem label="Send us feedback" url="/" />
-          <ThinMenuItem label="Get help..." url="/" />
-          <ThinMenuItem label="Settings" url="/" />
-        </View>
-      </View>
-    </View>
-  )
-}
-
-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 cdac003f0..7b5dd4e91 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<FlatList | undefined>()
@@ -107,12 +105,6 @@ export const MobileShell: React.FC = observer(() => {
   const swipeGestureInterp = useSharedValue<number>(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 && (
-        <LocationNavigator
-          url={store.nav.tab.current.url}
-          onNavigate={onNavigateLocation}
-          onDismiss={onDismissLocationNavigator}
-        />
-      )}
     </View>
   )
 })