[PWI] Home (#2007)

* Fix up home page

* Fix spacing

* Remove unused default tab

* Update logic

src/view/com/feeds/FeedPage.tsx

@@ -195,13 +195,30 @@ export function FeedPage({
 function useHeaderOffset() {
   const {isDesktop, isTablet} = useWebMediaQueries()
   const {fontScale} = useWindowDimensions()
+  const {hasSession} = useSession()
+
   if (isDesktop) {
     return 0
   }
   if (isTablet) {
-    return 50
+    if (hasSession) {
+      return 50
+    } else {
+      return 0
+    }
+  }
+
+  if (hasSession) {
+    const navBarPad = 16
+    const navBarText = 21 * fontScale
+    const tabBarPad = 20 + 3 // nav bar padding + border
+    const tabBarText = 16 * fontScale
+    const magic = 7 * fontScale
+    return navBarPad + navBarText + tabBarPad + tabBarText + magic
+  } else {
+    const navBarPad = 16
+    const navBarText = 21 * fontScale
+    const magic = 4 * fontScale
+    return navBarPad + navBarText + magic
   }
-  // default text takes 44px, plus 34px of pad
-  // scale the 44px by the font scale
-  return 34 + 44 * fontScale
 }

src/view/com/pager/FeedsTabBar.web.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {StyleSheet} from 'react-native'
+import {View, StyleSheet} from 'react-native'
 import Animated from 'react-native-reanimated'
 import {TabBar} from 'view/com/pager/TabBar'
 import {RenderTabBarFnProps} from 'view/com/pager/Pager'
@@ -9,20 +9,73 @@ import {FeedsTabBar as FeedsTabBarMobile} from './FeedsTabBarMobile'
 import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import {useShellLayout} from '#/state/shell/shell-layout'
 import {usePinnedFeedsInfos} from '#/state/queries/feed'
+import {useSession} from '#/state/session'
+import {TextLink} from '#/view/com/util/Link'
+import {CenteredView} from '../util/Views'
 
 export function FeedsTabBar(
   props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
 ) {
   const {isMobile, isTablet} = useWebMediaQueries()
+  const {hasSession} = useSession()
+
   if (isMobile) {
     return <FeedsTabBarMobile {...props} />
   } else if (isTablet) {
-    return <FeedsTabBarTablet {...props} />
+    if (hasSession) {
+      return <FeedsTabBarTablet {...props} />
+    } else {
+      return <FeedsTabBarPublic />
+    }
   } else {
     return null
   }
 }
 
+function FeedsTabBarPublic() {
+  const pal = usePalette('default')
+  const {isSandbox} = useSession()
+
+  return (
+    <CenteredView sideBorders>
+      <View
+        style={[
+          pal.view,
+          {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            paddingHorizontal: 18,
+            paddingVertical: 12,
+          },
+        ]}>
+        <TextLink
+          type="title-lg"
+          href="/"
+          style={[pal.text, {fontWeight: 'bold'}]}
+          text={
+            <>
+              {isSandbox ? 'SANDBOX' : 'Bluesky'}{' '}
+              {/*hasNew && (
+                <View
+                  style={{
+                    top: -8,
+                    backgroundColor: colors.blue3,
+                    width: 8,
+                    height: 8,
+                    borderRadius: 4,
+                  }}
+                />
+              )*/}
+            </>
+          }
+          // onPress={emitSoftReset}
+        />
+      </View>
+    </CenteredView>
+  )
+}
+
 function FeedsTabBarTablet(
   props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
 ) {

src/view/com/pager/FeedsTabBarMobile.tsx

@@ -23,7 +23,7 @@ export function FeedsTabBar(
   props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
 ) {
   const pal = usePalette('default')
-  const {isSandbox} = useSession()
+  const {isSandbox, hasSession} = useSession()
   const {_} = useLingui()
   const setDrawerOpen = useSetDrawerOpen()
   const feeds = usePinnedFeedsInfos()
@@ -61,30 +61,35 @@ export function FeedsTabBar(
         <Text style={[brandBlue, s.bold, styles.title]}>
           {isSandbox ? 'SANDBOX' : 'Bluesky'}
         </Text>
-        <View style={[pal.view]}>
-          <Link
-            testID="viewHeaderHomeFeedPrefsBtn"
-            href="/settings/home-feed"
-            hitSlop={HITSLOP_10}
-            accessibilityRole="button"
-            accessibilityLabel={_(msg`Home Feed Preferences`)}
-            accessibilityHint="">
-            <FontAwesomeIcon
-              icon="sliders"
-              style={pal.textLight as FontAwesomeIconStyle}
-            />
-          </Link>
+        <View style={[pal.view, {width: 18}]}>
+          {hasSession && (
+            <Link
+              testID="viewHeaderHomeFeedPrefsBtn"
+              href="/settings/home-feed"
+              hitSlop={HITSLOP_10}
+              accessibilityRole="button"
+              accessibilityLabel={_(msg`Home Feed Preferences`)}
+              accessibilityHint="">
+              <FontAwesomeIcon
+                icon="sliders"
+                style={pal.textLight as FontAwesomeIconStyle}
+              />
+            </Link>
+          )}
         </View>
       </View>
-      <TabBar
-        key={items.join(',')}
-        onPressSelected={props.onPressSelected}
-        selectedPage={props.selectedPage}
-        onSelect={props.onSelect}
-        testID={props.testID}
-        items={items}
-        indicatorColor={pal.colors.link}
-      />
+
+      {items.length > 0 && (
+        <TabBar
+          key={items.join(',')}
+          onPressSelected={props.onPressSelected}
+          selectedPage={props.selectedPage}
+          onSelect={props.onSelect}
+          testID={props.testID}
+          items={items}
+          indicatorColor={pal.colors.link}
+        />
+      )}
     </Animated.View>
   )
 }
@@ -104,8 +109,7 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
     paddingHorizontal: 18,
-    paddingTop: 8,
-    paddingBottom: 2,
+    paddingVertical: 8,
     width: '100%',
   },
   title: {