Add right column of web shell and tweak left column

src/view/shell/web/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import {observer} from 'mobx-react-lite'
-import {View, StyleSheet, Text} from 'react-native'
+import {View, StyleSheet} from 'react-native'
 import {useStores} from '../../../state'
 import {match, MatchResult} from '../../routes'
 import {DesktopLeftColumn} from './left-column'
-// import {DesktopRightColumn} from './right-column'
+import {DesktopRightColumn} from './right-column'
 import {Login} from '../../screens/Login'
 import {ErrorBoundary} from '../../com/util/ErrorBoundary'
 import {usePalette} from '../../lib/hooks/usePalette'
@@ -35,6 +35,7 @@ export const WebShell: React.FC = observer(() => {
         </View>
       ))}
       <DesktopLeftColumn />
+      <DesktopRightColumn />
     </View>
   )
   // TODO
@@ -48,25 +49,6 @@ export const WebShell: React.FC = observer(() => {
   //   imagesOpen={store.shell.composerOpts?.imagesOpen}
   //   onPost={store.shell.composerOpts?.onPost}
   // />
-  // return (
-  //   <View style={styles.outerContainer}>
-  //     {store.session.hasSession ? (
-  //       <>
-  //         <DesktopLeftColumn />
-  //         <View style={styles.innerContainer}>
-  //           <Text>Hello, world! (Logged in)</Text>
-  //           {children}
-  //         </View>
-  //         <DesktopRightColumn />
-  //       </>
-  //     ) : (
-  //       <View style={styles.innerContainer}>
-  //         <Text>Hello, world! (Logged out)</Text>
-  //         {children}
-  //       </View>
-  //     )}
-  //   </View>
-  // )
 })
 
 /**

src/view/shell/web/left-column.tsx

@@ -42,7 +42,9 @@ export const NavItem = observer(
               </Text>
             )}
           </View>
-          <Text type={isCurrent ? 'xl-bold' : 'xl-medium'}>{label}</Text>
+          <Text type={isCurrent ? 'xl-bold' : 'xl'} style={styles.navItemLabel}>
+            {label}
+          </Text>
         </Link>
       </Pressable>
     )
@@ -86,10 +88,11 @@ export const DesktopLeftColumn = observer(() => {
 const styles = StyleSheet.create({
   container: {
     position: 'absolute',
-    left: 'calc(50vw - 500px)',
-    width: '200px',
+    left: 'calc(50vw - 530px)',
+    width: '230px',
     height: '100%',
     borderRightWidth: 1,
+    paddingTop: 20,
   },
   navItem: {
     padding: '1rem',
@@ -109,7 +112,11 @@ const styles = StyleSheet.create({
     backgroundColor: colors.red3,
     color: colors.white,
     fontSize: 12,
+    fontWeight: 'bold',
     paddingHorizontal: 4,
-    borderRadius: 4,
+    borderRadius: 6,
+  },
+  navItemLabel: {
+    fontSize: 19,
   },
 })

src/view/shell/web/right-column.tsx

@@ -1,10 +1,28 @@
 import React from 'react'
-import {Text, View, StyleSheet} from 'react-native'
+import {View, StyleSheet} from 'react-native'
+import {Link} from '../../com/util/Link'
+import {Text} from '../../com/util/text/Text'
+import {usePalette} from '../../lib/hooks/usePalette'
+import {MagnifyingGlassIcon} from '../../lib/icons'
+import {LiteSuggestedFollows} from '../../com/discover/LiteSuggestedFollows'
+import {s} from '../../lib/styles'
 
 export const DesktopRightColumn: React.FC = () => {
+  const pal = usePalette('default')
   return (
-    <View style={styles.container}>
-      <Text>Right Column</Text>
+    <View style={[styles.container, pal.border]}>
+      <Link href="/search" style={[pal.btn, styles.searchContainer]}>
+        <View style={styles.searchIcon}>
+          <MagnifyingGlassIcon style={pal.textLight} />
+        </View>
+        <Text type="lg" style={pal.textLight}>
+          Search
+        </Text>
+      </Link>
+      <Text type="xl-bold" style={s.mb10}>
+        Suggested Follows
+      </Text>
+      <LiteSuggestedFollows />
     </View>
   )
 }
@@ -12,8 +30,23 @@ export const DesktopRightColumn: React.FC = () => {
 const styles = StyleSheet.create({
   container: {
     position: 'absolute',
-    right: 'calc(50vw - 500px)',
-    width: '200px',
+    right: 'calc(50vw - 650px)',
+    width: '350px',
     height: '100%',
+    borderLeftWidth: 1,
+    overscrollBehavior: 'auto',
+    paddingLeft: 30,
+    paddingTop: 10,
+  },
+  searchContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    borderRadius: 20,
+    marginBottom: 20,
+  },
+  searchIcon: {
+    marginRight: 5,
   },
 })