Tune up custom feed uis on web

3 files changed, 40 insertions, 12 deletions

diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx
index 70500db2c..422d986a7 100644
--- a/src/view/com/pager/TabBar.tsx
+++ b/src/view/com/pager/TabBar.tsx
@@ -92,7 +92,7 @@ export function TabBar({
               hoverStyle={pal.viewLight}
               onPress={() => onPressItem(i)}>
               <Text
-                type="lg-bold"
+                type={isDesktopWeb ? 'xl-bold' : 'lg-bold'}
                 testID={testID ? `${testID}-${item}` : undefined}
                 style={selected ? pal.text : pal.textLight}>
                 {item}
@@ -112,7 +112,7 @@ const styles = isDesktopWeb
         width: 598,
       },
       contentContainer: {
-        columnGap: 14,
+        columnGap: 8,
         marginLeft: 14,
         paddingRight: 14,
         backgroundColor: 'transparent',
@@ -120,6 +120,7 @@ const styles = isDesktopWeb
       item: {
         paddingTop: 14,
         paddingBottom: 12,
+        paddingHorizontal: 10,
         borderBottomWidth: 3,
         borderBottomColor: 'transparent',
       },
diff --git a/src/view/com/posts/MultiFeed.tsx b/src/view/com/posts/MultiFeed.tsx
index 4911c9e2c..75c57c446 100644
--- a/src/view/com/posts/MultiFeed.tsx
+++ b/src/view/com/posts/MultiFeed.tsx
@@ -22,6 +22,8 @@ import {s} from 'lib/styles'
 import {useAnalytics} from 'lib/analytics'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useTheme} from 'lib/ThemeContext'
+import {isDesktopWeb} from 'platform/detection'
+import {CogIcon} from 'lib/icons'
 
 export const MultiFeed = observer(function Feed({
   multifeed,
@@ -81,6 +83,18 @@ export const MultiFeed = observer(function Feed({
   const renderItem = React.useCallback(
     ({item}: {item: MultiFeedItem}) => {
       if (item.type === 'header') {
+        if (isDesktopWeb) {
+          return (
+            <View style={[pal.view, pal.border, styles.headerDesktop]}>
+              <Text type="2xl-bold" style={pal.text}>
+                My Feeds
+              </Text>
+              <Link href="/settings/saved-feeds">
+                <CogIcon strokeWidth={1.5} style={pal.icon} size={28} />
+              </Link>
+            </View>
+          )
+        }
         return <View style={[styles.header, pal.border]} />
       } else if (item.type === 'feed-header') {
         return (
@@ -167,7 +181,11 @@ export const MultiFeed = observer(function Feed({
             />
           }
           contentContainerStyle={s.contentContainer}
-          style={[{paddingTop: headerOffset}, pal.viewLight, styles.container]}
+          style={[
+            {paddingTop: headerOffset},
+            isDesktopWeb ? pal.view : pal.viewLight,
+            styles.container,
+          ]}
           onScroll={onScroll}
           scrollEventThrottle={scrollEventThrottle}
           indicatorStyle={theme.colorScheme === 'dark' ? 'white' : 'black'}
@@ -192,6 +210,15 @@ const styles = StyleSheet.create({
     borderTopWidth: 1,
     marginBottom: 4,
   },
+  headerDesktop: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderBottomWidth: 1,
+    marginBottom: 4,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
   feedHeader: {
     flexDirection: 'row',
     gap: 8,
diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx
index 3b14d7e99..ce232a730 100644
--- a/src/view/shell/desktop/LeftNav.tsx
+++ b/src/view/shell/desktop/LeftNav.tsx
@@ -198,15 +198,6 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() {
         label="Search"
       />
       <NavItem
-        href="/notifications"
-        count={store.me.notifications.unreadCountLabel}
-        icon={<BellIcon strokeWidth={2} size={24} style={pal.text} />}
-        iconFilled={
-          <BellIconSolid strokeWidth={1.5} size={24} style={pal.text} />
-        }
-        label="Notifications"
-      />
-      <NavItem
         href="/feeds"
         icon={
           <SatelliteDishIcon
@@ -225,6 +216,15 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() {
         label="My Feeds"
       />
       <NavItem
+        href="/notifications"
+        count={store.me.notifications.unreadCountLabel}
+        icon={<BellIcon strokeWidth={2} size={24} style={pal.text} />}
+        iconFilled={
+          <BellIconSolid strokeWidth={1.5} size={24} style={pal.text} />
+        }
+        label="Notifications"
+      />
+      <NavItem
         href="/moderation"
         icon={
           <HandIcon