Resolve all remaining lint issues (#88)

* Rework 'navIdx' variables from number arrays to strings to avoid equality-check failures in react hooks

* Resolve all remaining lint issues

* Fix tests

* Use node v18 in gh action test

2 files changed, 145 insertions, 151 deletions

diff --git a/src/view/shell/mobile/Menu.tsx b/src/view/shell/mobile/Menu.tsx
index 26cb5b9bd..a7d3e2142 100644
--- a/src/view/shell/mobile/Menu.tsx
+++ b/src/view/shell/mobile/Menu.tsx
@@ -23,163 +23,157 @@ import {Text} from '../../com/util/text/Text'
 import {ToggleButton} from '../../com/util/forms/ToggleButton'
 import {usePalette} from '../../lib/hooks/usePalette'
 
-export const Menu = observer(
-  ({visible, onClose}: {visible: boolean; onClose: () => void}) => {
-    const pal = usePalette('default')
-    const store = useStores()
+export const Menu = observer(({onClose}: {onClose: () => void}) => {
+  const pal = usePalette('default')
+  const store = useStores()
 
-    // events
-    // =
+  // events
+  // =
 
-    const onNavigate = (url: string) => {
-      onClose()
-      if (url === '/notifications') {
-        store.nav.switchTo(1, true)
-      } else {
-        store.nav.switchTo(0, true)
-        if (url !== '/') {
-          store.nav.navigate(url)
-        }
+  const onNavigate = (url: string) => {
+    onClose()
+    if (url === '/notifications') {
+      store.nav.switchTo(1, true)
+    } else {
+      store.nav.switchTo(0, true)
+      if (url !== '/') {
+        store.nav.navigate(url)
       }
     }
+  }
 
-    // rendering
-    // =
+  // rendering
+  // =
 
-    const MenuItem = ({
-      icon,
-      label,
-      count,
-      url,
-      bold,
-      onPress,
-    }: {
-      icon: JSX.Element
-      label: string
-      count?: number
-      url?: string
-      bold?: boolean
-      onPress?: () => void
-    }) => (
-      <TouchableOpacity
-        testID={`menuItemButton-${label}`}
-        style={styles.menuItem}
-        onPress={onPress ? onPress : () => onNavigate(url || '/')}>
-        <View style={[styles.menuItemIconWrapper]}>
-          {icon}
-          {count ? (
-            <View style={styles.menuItemCount}>
-              <Text style={styles.menuItemCountLabel}>{count}</Text>
-            </View>
-          ) : undefined}
-        </View>
-        <Text
-          type="title"
-          style={[
-            pal.text,
-            bold ? styles.menuItemLabelBold : styles.menuItemLabel,
-          ]}
-          numberOfLines={1}>
-          {label}
-        </Text>
-      </TouchableOpacity>
-    )
-
-    return (
-      <ScrollView testID="menuView" style={[styles.view, pal.view]}>
-        <TouchableOpacity
-          testID="profileCardButton"
-          onPress={() => onNavigate(`/profile/${store.me.handle}`)}
-          style={styles.profileCard}>
-          <UserAvatar
-            size={60}
-            displayName={store.me.displayName}
-            handle={store.me.handle}
-            avatar={store.me.avatar}
-          />
-          <View style={s.flex1}>
-            <Text
-              type="title-lg"
-              style={[pal.text, styles.profileCardDisplayName]}
-              numberOfLines={1}>
-              {store.me.displayName || store.me.handle}
-            </Text>
-            <Text
-              style={[pal.textLight, styles.profileCardHandle]}
-              numberOfLines={1}>
-              @{store.me.handle}
-            </Text>
+  const MenuItem = ({
+    icon,
+    label,
+    count,
+    url,
+    bold,
+    onPress,
+  }: {
+    icon: JSX.Element
+    label: string
+    count?: number
+    url?: string
+    bold?: boolean
+    onPress?: () => void
+  }) => (
+    <TouchableOpacity
+      testID={`menuItemButton-${label}`}
+      style={styles.menuItem}
+      onPress={onPress ? onPress : () => onNavigate(url || '/')}>
+      <View style={[styles.menuItemIconWrapper]}>
+        {icon}
+        {count ? (
+          <View style={styles.menuItemCount}>
+            <Text style={styles.menuItemCountLabel}>{count}</Text>
           </View>
-        </TouchableOpacity>
-        <TouchableOpacity
-          testID="searchBtn"
-          style={[styles.searchBtn, pal.btn]}
-          onPress={() => onNavigate('/search')}>
-          <MagnifyingGlassIcon
-            style={pal.text as StyleProp<ViewStyle>}
-            size={25}
-          />
-          <Text type="title" style={[pal.text, styles.searchBtnLabel]}>
-            Search
+        ) : undefined}
+      </View>
+      <Text
+        type="title"
+        style={[
+          pal.text,
+          bold ? styles.menuItemLabelBold : styles.menuItemLabel,
+        ]}
+        numberOfLines={1}>
+        {label}
+      </Text>
+    </TouchableOpacity>
+  )
+
+  return (
+    <ScrollView testID="menuView" style={[styles.view, pal.view]}>
+      <TouchableOpacity
+        testID="profileCardButton"
+        onPress={() => onNavigate(`/profile/${store.me.handle}`)}
+        style={styles.profileCard}>
+        <UserAvatar
+          size={60}
+          displayName={store.me.displayName}
+          handle={store.me.handle}
+          avatar={store.me.avatar}
+        />
+        <View style={s.flex1}>
+          <Text
+            type="title-lg"
+            style={[pal.text, styles.profileCardDisplayName]}
+            numberOfLines={1}>
+            {store.me.displayName || store.me.handle}
           </Text>
-        </TouchableOpacity>
-        <View style={[styles.section, pal.border, {paddingTop: 5}]}>
-          <MenuItem
-            icon={
-              <HomeIcon style={pal.text as StyleProp<ViewStyle>} size="26" />
-            }
-            label="Home"
-            url="/"
-          />
-          <MenuItem
-            icon={
-              <BellIcon style={pal.text as StyleProp<ViewStyle>} size="28" />
-            }
-            label="Notifications"
-            url="/notifications"
-            count={store.me.notificationCount}
-          />
-          <MenuItem
-            icon={
-              <UserIcon
-                style={pal.text as StyleProp<ViewStyle>}
-                size="30"
-                strokeWidth={2}
-              />
-            }
-            label="Profile"
-            url={`/profile/${store.me.handle}`}
-          />
-          <MenuItem
-            icon={
-              <CogIcon
-                style={pal.text as StyleProp<ViewStyle>}
-                size="30"
-                strokeWidth={2}
-              />
-            }
-            label="Settings"
-            url="/settings"
-          />
-        </View>
-        <View style={[styles.section, pal.border]}>
-          <ToggleButton
-            label="Dark mode"
-            isSelected={store.shell.darkMode}
-            onPress={() => store.shell.setDarkMode(!store.shell.darkMode)}
-          />
-        </View>
-        <View style={styles.footer}>
-          <Text style={[pal.textLight]}>
-            Build version {VersionNumber.appVersion} (
-            {VersionNumber.buildVersion})
+          <Text
+            style={[pal.textLight, styles.profileCardHandle]}
+            numberOfLines={1}>
+            @{store.me.handle}
           </Text>
         </View>
-        <View style={s.footerSpacer} />
-      </ScrollView>
-    )
-  },
-)
+      </TouchableOpacity>
+      <TouchableOpacity
+        testID="searchBtn"
+        style={[styles.searchBtn, pal.btn]}
+        onPress={() => onNavigate('/search')}>
+        <MagnifyingGlassIcon
+          style={pal.text as StyleProp<ViewStyle>}
+          size={25}
+        />
+        <Text type="title" style={[pal.text, styles.searchBtnLabel]}>
+          Search
+        </Text>
+      </TouchableOpacity>
+      <View style={[styles.section, pal.border, s.pt5]}>
+        <MenuItem
+          icon={<HomeIcon style={pal.text as StyleProp<ViewStyle>} size="26" />}
+          label="Home"
+          url="/"
+        />
+        <MenuItem
+          icon={<BellIcon style={pal.text as StyleProp<ViewStyle>} size="28" />}
+          label="Notifications"
+          url="/notifications"
+          count={store.me.notificationCount}
+        />
+        <MenuItem
+          icon={
+            <UserIcon
+              style={pal.text as StyleProp<ViewStyle>}
+              size="30"
+              strokeWidth={2}
+            />
+          }
+          label="Profile"
+          url={`/profile/${store.me.handle}`}
+        />
+        <MenuItem
+          icon={
+            <CogIcon
+              style={pal.text as StyleProp<ViewStyle>}
+              size="30"
+              strokeWidth={2}
+            />
+          }
+          label="Settings"
+          url="/settings"
+        />
+      </View>
+      <View style={[styles.section, pal.border]}>
+        <ToggleButton
+          label="Dark mode"
+          isSelected={store.shell.darkMode}
+          onPress={() => store.shell.setDarkMode(!store.shell.darkMode)}
+        />
+      </View>
+      <View style={styles.footer}>
+        <Text style={[pal.textLight]}>
+          Build version {VersionNumber.appVersion} ({VersionNumber.buildVersion}
+          )
+        </Text>
+      </View>
+      <View style={s.footerSpacer} />
+    </ScrollView>
+  )
+})
 
 const styles = StyleSheet.create({
   view: {
diff --git a/src/view/shell/mobile/index.tsx b/src/view/shell/mobile/index.tsx
index fb14211eb..62ab7a2ad 100644
--- a/src/view/shell/mobile/index.tsx
+++ b/src/view/shell/mobile/index.tsx
@@ -32,7 +32,7 @@ import {Text} from '../../com/util/text/Text'
 import {ErrorBoundary} from '../../com/util/ErrorBoundary'
 import {TabsSelector} from './TabsSelector'
 import {Composer} from './Composer'
-import {colors} from '../../lib/styles'
+import {s, colors} from '../../lib/styles'
 import {clamp} from '../../../lib/numbers'
 import {
   GridIcon,
@@ -385,7 +385,7 @@ export const MobileShell: React.FC = observer(() => {
                     />
                     <Animated.View
                       style={[
-                        {height: '100%'},
+                        s.h100pct,
                         screenBg,
                         current
                           ? [
@@ -486,7 +486,7 @@ export const MobileShell: React.FC = observer(() => {
  */
 type ScreenRenderDesc = MatchResult & {
   key: string
-  navIdx: [number, number]
+  navIdx: string
   current: boolean
   previous: boolean
   isNewTab: boolean
@@ -514,7 +514,7 @@ function constructScreenRenderDesc(nav: NavigationModel): {
       hasNewTab = hasNewTab || tab.isNewTab
       return Object.assign(matchRes, {
         key: `t${tab.id}-s${screen.index}`,
-        navIdx: [tab.id, screen.id],
+        navIdx: `${tab.id}-${screen.id}`,
         current: isCurrent,
         previous: isPrevious,
         isNewTab: tab.isNewTab,