Add lists and profilelist screens

bskyweb/cmd/bskyweb/server.go

@@ -100,6 +100,7 @@ func serve(cctx *cli.Context) error {
 	// generic routes
 	e.GET("/search", server.WebGeneric)
 	e.GET("/notifications", server.WebGeneric)
+	e.GET("/lists", server.WebGeneric)
 	e.GET("/settings", server.WebGeneric)
 	e.GET("/settings/app-passwords", server.WebGeneric)
 	e.GET("/settings/muted-accounts", server.WebGeneric)
@@ -116,6 +117,7 @@ func serve(cctx *cli.Context) error {
 	e.GET("/profile/:handle", server.WebProfile)
 	e.GET("/profile/:handle/follows", server.WebGeneric)
 	e.GET("/profile/:handle/followers", server.WebGeneric)
+	e.GET("/profile/:handle/lists/:rkey", server.WebGeneric)
 
 	// post endpoints; only first populates info
 	e.GET("/profile/:handle/post/:rkey", server.WebPost)

src/Navigation.tsx

@@ -33,11 +33,13 @@ import {useStores} from './state'
 import {HomeScreen} from './view/screens/Home'
 import {SearchScreen} from './view/screens/Search'
 import {NotificationsScreen} from './view/screens/Notifications'
+import {ListsScreen} from './view/screens/Lists'
 import {NotFoundScreen} from './view/screens/NotFound'
 import {SettingsScreen} from './view/screens/Settings'
 import {ProfileScreen} from './view/screens/Profile'
 import {ProfileFollowersScreen} from './view/screens/ProfileFollowers'
 import {ProfileFollowsScreen} from './view/screens/ProfileFollows'
+import {ProfileListScreen} from './view/screens/ProfileList'
 import {PostThreadScreen} from './view/screens/PostThread'
 import {PostLikedByScreen} from './view/screens/PostLikedBy'
 import {PostRepostedByScreen} from './view/screens/PostRepostedBy'
@@ -70,6 +72,7 @@ function commonScreens(Stack: typeof HomeTab) {
   return (
     <>
       <Stack.Screen name="NotFound" component={NotFoundScreen} />
+      <Stack.Screen name="Lists" component={ListsScreen} />
       <Stack.Screen name="Settings" component={SettingsScreen} />
       <Stack.Screen name="Profile" component={ProfileScreen} />
       <Stack.Screen
@@ -77,6 +80,7 @@ function commonScreens(Stack: typeof HomeTab) {
         component={ProfileFollowersScreen}
       />
       <Stack.Screen name="ProfileFollows" component={ProfileFollowsScreen} />
+      <Stack.Screen name="ProfileList" component={ProfileListScreen} />
       <Stack.Screen name="PostThread" component={PostThreadScreen} />
       <Stack.Screen name="PostLikedBy" component={PostLikedByScreen} />
       <Stack.Screen name="PostRepostedBy" component={PostRepostedByScreen} />

src/lib/routes/types.ts

@@ -5,10 +5,12 @@ export type {NativeStackScreenProps} from '@react-navigation/native-stack'
 
 export type CommonNavigatorParams = {
   NotFound: undefined
+  Lists: undefined
   Settings: undefined
   Profile: {name: string; hideBackButton?: boolean}
   ProfileFollowers: {name: string}
   ProfileFollows: {name: string}
+  ProfileList: {name: string; rkey: string}
   PostThread: {name: string; rkey: string}
   PostLikedBy: {name: string; rkey: string}
   PostRepostedBy: {name: string; rkey: string}

src/routes.ts

@@ -4,10 +4,12 @@ export const router = new Router({
   Home: '/',
   Search: '/search',
   Notifications: '/notifications',
+  Lists: '/lists',
   Settings: '/settings',
   Profile: '/profile/:name',
   ProfileFollowers: '/profile/:name/followers',
   ProfileFollows: '/profile/:name/follows',
+  ProfileList: '/profile/:name/lists/:rkey',
   PostThread: '/profile/:name/post/:rkey',
   PostLikedBy: '/profile/:name/post/:rkey/liked-by',
   PostRepostedBy: '/profile/:name/post/:rkey/reposted-by',

src/view/index.ts

@@ -45,6 +45,7 @@ import {faImage} from '@fortawesome/free-solid-svg-icons/faImage'
 import {faInfo} from '@fortawesome/free-solid-svg-icons/faInfo'
 import {faLanguage} from '@fortawesome/free-solid-svg-icons/faLanguage'
 import {faLink} from '@fortawesome/free-solid-svg-icons/faLink'
+import {faListUl} from '@fortawesome/free-solid-svg-icons/faListUl'
 import {faLock} from '@fortawesome/free-solid-svg-icons/faLock'
 import {faMagnifyingGlass} from '@fortawesome/free-solid-svg-icons/faMagnifyingGlass'
 import {faMessage} from '@fortawesome/free-regular-svg-icons/faMessage'
@@ -122,6 +123,7 @@ export function setup() {
     faInfo,
     faLanguage,
     faLink,
+    faListUl,
     faLock,
     faMagnifyingGlass,
     faMessage,

src/view/screens/Lists.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import {View} from 'react-native'
+import {useFocusEffect} from '@react-navigation/native'
+import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
+import {withAuthRequired} from 'view/com/auth/withAuthRequired'
+import {ViewHeader} from '../com/util/ViewHeader'
+import {useStores} from 'state/index'
+
+type Props = NativeStackScreenProps<CommonNavigatorParams, 'Lists'>
+export const ListsScreen = withAuthRequired(({route}: Props) => {
+  const store = useStores()
+
+  useFocusEffect(
+    React.useCallback(() => {
+      store.shell.setMinimalShellMode(false)
+    }, [store]),
+  )
+
+  return (
+    <View>
+      <ViewHeader title="Lists" />
+    </View>
+  )
+})

src/view/screens/ProfileList.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import {View} from 'react-native'
+import {useFocusEffect} from '@react-navigation/native'
+import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
+import {withAuthRequired} from 'view/com/auth/withAuthRequired'
+import {ViewHeader} from '../com/util/ViewHeader'
+import {useStores} from 'state/index'
+
+type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileList'>
+export const ProfileListScreen = withAuthRequired(({route}: Props) => {
+  const store = useStores()
+  const {name, rkey} = route.params
+
+  useFocusEffect(
+    React.useCallback(() => {
+      store.shell.setMinimalShellMode(false)
+    }, [store]),
+  )
+
+  return (
+    <View>
+      <ViewHeader title="List" />
+    </View>
+  )
+})

src/view/shell/Drawer.tsx

@@ -94,6 +94,12 @@ export const DrawerContent = observer(() => {
     onPressTab('MyProfile')
   }, [onPressTab])
 
+  const onPressLists = React.useCallback(() => {
+    track('Menu:ItemClicked', {url: 'Lists'})
+    navigation.navigate('Lists')
+    store.shell.closeDrawer()
+  }, [navigation, track, store.shell])
+
   const onPressSettings = React.useCallback(() => {
     track('Menu:ItemClicked', {url: 'Settings'})
     navigation.navigate('Settings')
@@ -220,6 +226,20 @@ export const DrawerContent = observer(() => {
             bold={isAtNotifications}
             onPress={onPressNotifications}
           />
+          <MenuItem
+            href="/lists"
+            icon={
+              <FontAwesomeIcon
+                icon="list-ul"
+                style={pal.text as FontAwesomeIconStyle}
+                size={20}
+              />
+            }
+            label="Lists"
+            accessibilityLabel="Lists"
+            accessibilityHint=""
+            onPress={onPressLists}
+          />
           <MenuItem
             icon={
               isAtMyProfile ? (

src/view/shell/desktop/LeftNav.tsx

@@ -201,6 +201,24 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() {
         }
         label="Notifications"
       />
+      <NavItem
+        href="/lists"
+        icon={
+          <FontAwesomeIcon
+            icon="list-ul"
+            style={pal.text as FontAwesomeIconStyle}
+            size={20}
+          />
+        }
+        iconFilled={
+          <FontAwesomeIcon
+            icon="list-ul"
+            style={pal.text as FontAwesomeIconStyle}
+            size={20}
+          />
+        }
+        label="Lists"
+      />
       {store.session.hasSession && (
         <NavItem
           href={`/profile/${store.me.handle}`}