From a014b4e6cbe9c397233c2ffe16c4417c68d1f15f Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Thu, 23 Feb 2023 12:26:25 -0600
Subject: [PATCH] Tweak approach to the viewheader

---
 src/view/com/posts/FeedItem.tsx      | 10 +++++++++-
 src/view/com/util/ViewHeader.tsx     |  4 ++++
 src/view/com/util/ViewHeader.web.tsx |  9 ---------
 src/view/screens/Home.tsx            |  4 +---
 src/view/shell/web/DesktopHeader.tsx |  2 +-
 5 files changed, 15 insertions(+), 14 deletions(-)
 delete mode 100644 src/view/com/util/ViewHeader.web.tsx

diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx
index 67807b14..9a652d38 100644
--- a/src/view/com/posts/FeedItem.tsx
+++ b/src/view/com/posts/FeedItem.tsx
@@ -22,6 +22,7 @@ import {s} from 'lib/styles'
 import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useAnalytics} from 'lib/analytics'
+import {isDesktopWeb} from 'platform/detection'
 
 export const FeedItem = observer(function ({
   item,
@@ -108,8 +109,9 @@ export const FeedItem = observer(function ({
   const isNoTop = isChild && !item._isThreadChild
   const outerStyles = [
     styles.outer,
+    isDesktopWeb && styles.outerDesktopWeb,
     pal.view,
-    {borderTopColor: pal.colors.border},
+    {borderColor: pal.colors.border},
     isSmallTop ? styles.outerSmallTop : undefined,
     isNoTop ? styles.outerNoTop : undefined,
     item._isThreadParent ? styles.outerNoBottom : undefined,
@@ -273,6 +275,11 @@ const styles = StyleSheet.create({
     paddingRight: 15,
     paddingBottom: 8,
   },
+  outerDesktopWeb: {
+    borderWidth: 1,
+    borderRadius: 4,
+    marginBottom: 10,
+  },
   outerNoTop: {
     borderTopWidth: 0,
     paddingTop: 0,
@@ -282,6 +289,7 @@ const styles = StyleSheet.create({
   },
   outerNoBottom: {
     paddingBottom: 2,
+    marginBottom: 0,
   },
   topReplyLine: {
     position: 'absolute',
diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx
index 259196b6..0c3ca0bf 100644
--- a/src/view/com/util/ViewHeader.tsx
+++ b/src/view/com/util/ViewHeader.tsx
@@ -8,6 +8,7 @@ import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
 import {useAnalytics} from 'lib/analytics'
+import {isDesktopWeb} from '../../../platform/detection'
 
 const BACK_HITSLOP = {left: 10, top: 10, right: 30, bottom: 10}
 
@@ -33,6 +34,9 @@ export const ViewHeader = observer(function ViewHeader({
   if (typeof canGoBack === 'undefined') {
     canGoBack = store.nav.tab.canGoBack
   }
+  if (isDesktopWeb) {
+    return undefined
+  }
   return (
     <Container hideOnScroll={hideOnScroll || false}>
       <TouchableOpacity
diff --git a/src/view/com/util/ViewHeader.web.tsx b/src/view/com/util/ViewHeader.web.tsx
deleted file mode 100644
index 8f699eaf..00000000
--- a/src/view/com/util/ViewHeader.web.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import {observer} from 'mobx-react-lite'
-
-export const ViewHeader = observer(function ViewHeader(_opts: {
-  title: string
-  canGoBack?: boolean
-}) {
-  // TODO
-  return null
-})
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index 0e9cdd48..b3cdf409 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -11,7 +11,6 @@ import {ScreenParams} from '../routes'
 import {s} from 'lib/styles'
 import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
 import {useAnalytics} from 'lib/analytics'
-import {isWeb} from '../../platform/detection'
 
 const HEADER_HEIGHT = 42
 
@@ -92,7 +91,6 @@ export const Home = observer(function Home({navIdx, visible}: ScreenParams) {
 
   return (
     <View style={s.h100pct}>
-      {isWeb && <ViewHeader title="Home Feed" canGoBack={false} />}
       <Feed
         testID="homeFeed"
         key="default"
@@ -103,7 +101,7 @@ export const Home = observer(function Home({navIdx, visible}: ScreenParams) {
         onScroll={onMainScroll}
         headerOffset={HEADER_HEIGHT}
       />
-      {!isWeb && <ViewHeader title="Bluesky" canGoBack={false} hideOnScroll />}
+      <ViewHeader title="Bluesky" canGoBack={false} hideOnScroll />
       {store.me.mainFeed.hasNewLatest && !store.me.mainFeed.isRefreshing && (
         <LoadLatestBtn onPress={onPressLoadLatest} />
       )}
diff --git a/src/view/shell/web/DesktopHeader.tsx b/src/view/shell/web/DesktopHeader.tsx
index bc72b40b..de0b2a21 100644
--- a/src/view/shell/web/DesktopHeader.tsx
+++ b/src/view/shell/web/DesktopHeader.tsx
@@ -199,7 +199,7 @@ const styles = StyleSheet.create({
   },
   navItemCount: {
     position: 'absolute',
-    top: -5,
+    top: 0,
     left: 15,
     backgroundColor: colors.red3,
     color: colors.white,