intial root name stuff

mozzius · Sep 19, 2023 · a1849bc · a1849bc · vercel · Sep 19, 2023
1 parent 262b71c
commit a1849bc
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 13 deletions.
diff --git a/apps/expo/src/app/(tabs)/(feeds,search,notifications,self)/_layout.tsx b/apps/expo/src/app/(tabs)/(feeds,search,notifications,self)/_layout.tsx
@@ -11,6 +11,7 @@ import { useTheme } from "@react-navigation/native";
 import { Avatar } from "~/components/avatar";
 import { useDrawer } from "~/components/drawer-content";
 import { useOptionalAgent } from "~/lib/agent";
+import { useAppPreferences } from "~/lib/hooks/preferences";
 
 const stackOptions = {
   screenOptions: {
@@ -29,6 +30,8 @@ export default function SubStack({
   // agent might not be available yet
   const agent = useOptionalAgent();
 
+  const [{ homepage, defaultFeed }] = useAppPreferences();
+
   const headerLeft = () => (
     <TouchableOpacity onPress={() => openDrawer()} className="mr-3">
       <Avatar size="small" />
@@ -47,7 +50,16 @@ export default function SubStack({
   switch (segment) {
     case "(feeds)":
       return (
-        <Stack {...stackOptions}>
+        <Stack
+          {...stackOptions}
+          initialRouteName={
+            homepage === "feeds"
+              ? "feeds/index"
+              : defaultFeed === "following"
+              ? "feeds/following"
+              : defaultFeed
+          }
+        >
           <Stack.Screen
             name="feeds/index"
             options={{

diff --git a/apps/expo/src/app/(tabs)/_layout.tsx b/apps/expo/src/app/(tabs)/_layout.tsx
@@ -6,15 +6,18 @@ import { useTheme } from "@react-navigation/native";
 import { useQuery } from "@tanstack/react-query";
 import {
   BellIcon,
+  CloudIcon,
   CloudyIcon,
   PenBox,
   SearchIcon,
   UserIcon,
+  View,
 } from "lucide-react-native";
 
 import { DrawerContent, DrawerProvider } from "~/components/drawer-content";
 import { StatusBar } from "~/components/status-bar";
 import { useOptionalAgent } from "~/lib/agent";
+import { useAppPreferences } from "~/lib/hooks/preferences";
 import { useRefreshOnFocus } from "~/lib/utils/query";
 
 export default function AppLayout() {
@@ -48,6 +51,8 @@ export default function AppLayout() {
   const segments = useSegments();
   const router = useRouter();
 
+  const [{ homepage }] = useAppPreferences();
+
   return (
     <DrawerProvider value={openDrawer}>
       <StatusBar />
@@ -66,13 +71,14 @@ export default function AppLayout() {
         drawerType="slide"
         statusBarAnimation="slide"
         drawerStyle={{
-          width: Math.min(Dimensions.get("window").width * 0.8, 350),
+          width: Math.min(Dimensions.get("window").width * 0.8, 400),
           backgroundColor: theme.colors.card,
         }}
         swipeEdgeWidth={Dimensions.get("window").width}
         swipeEnabled={Platform.OS === "ios" ? segments.length === 3 : true}
       >
         <Tabs
+          screenOptions={{ headerShown: false }}
           screenListeners={{
             tabPress: (evt) => {
               if (evt.target?.startsWith("null")) {
@@ -83,14 +89,17 @@ export default function AppLayout() {
               }
             },
           }}
-          screenOptions={{ headerShown: false }}
         >
           <Tabs.Screen
             name="(feeds)"
             options={{
-              title: "Feeds",
+              title: homepage === "feeds" ? "Feeds" : "Skyline",
               tabBarIcon({ color }) {
-                return <CloudyIcon color={color} />;
+                return homepage === "feeds" ? (
+                  <CloudyIcon color={color} />
+                ) : (
+                  <CloudIcon color={color} />
+                );
               },
             }}
           />
@@ -107,8 +116,15 @@ export default function AppLayout() {
             name="null"
             options={{
               title: "Post",
-              tabBarIcon({ color }) {
-                return <PenBox color={color} />;
+              tabBarIcon() {
+                return (
+                  <View
+                    className="h-8 w-10 flex-1 items-center justify-center rounded-lg"
+                    style={{ backgroundColor: theme.colors.primary }}
+                  >
+                    <PenBox className="text-white" size={16} />
+                  </View>
+                );
               },
             }}
           />

diff --git a/apps/expo/src/components/drawer-content.tsx b/apps/expo/src/components/drawer-content.tsx
@@ -7,20 +7,20 @@ import { useActionSheet } from "@expo/react-native-action-sheet";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useTheme } from "@react-navigation/native";
 import {
+  CloudyIcon,
   LogOutIcon,
   MoonIcon,
   PaletteIcon,
   SettingsIcon,
   SmartphoneIcon,
-  StarIcon,
   SunIcon,
   TicketIcon,
 } from "lucide-react-native";
 import { useColorScheme } from "nativewind";
 import { type ColorSchemeSystem } from "nativewind/dist/style-sheet/color-scheme";
 
 import { useInviteCodes } from "~/app/codes/_layout";
-import { useAgent } from "~/lib/agent";
+import { useAppPreferences } from "~/lib/hooks/preferences";
 import { useLogOut } from "~/lib/log-out-context";
 import { ActorDetails } from "./actor-details";
 import { Text } from "./text";
@@ -40,10 +40,10 @@ export const DrawerContent = () => {
   const logOut = useLogOut();
   const { colorScheme, setColorScheme } = useColorScheme();
   const { showActionSheetWithOptions } = useActionSheet();
-  const agent = useAgent();
   const codes = useInviteCodes();
   const setOpenDrawer = useDrawer();
   const theme = useTheme();
+  const [{ homepage }] = useAppPreferences();
 
   const changeTheme = () => {
     const options = ["Light", "Dark", "System", "Cancel"];
@@ -93,6 +93,22 @@ export const DrawerContent = () => {
     <SafeAreaView className="h-full p-8">
       <ActorDetails />
       <View className="mt-8 border-t border-neutral-300 pt-4">
+        {homepage === "skyline" && (
+          <Link
+            href="/feeds/index"
+            asChild
+            onPress={() => setOpenDrawer(false)}
+          >
+            <TouchableOpacity
+              accessibilityRole="link"
+              accessibilityLabel="Feeds screen"
+              className="mt-2 w-full flex-row items-center py-2"
+            >
+              <CloudyIcon color={theme.colors.text} />
+              <Text className="ml-6 text-base font-medium">My feeds</Text>
+            </TouchableOpacity>
+          </Link>
+        )}
         <Link href="/codes" asChild onPress={() => setOpenDrawer(false)}>
           <TouchableOpacity
             accessibilityRole="link"
@@ -101,7 +117,15 @@ export const DrawerContent = () => {
           >
             <TicketIcon color={theme.colors.text} />
             <Text className="ml-6 text-base font-medium">
-              Invite codes{numCodes > 0 && ` (${numCodes})`}
+              Invite codes
+              {numCodes > 0 && (
+                <>
+                  {" "}
+                  <Text style={{ color: theme.colors.primary }}>
+                    ({numCodes})
+                  </Text>
+                </>
+              )}
             </Text>
           </TouchableOpacity>
         </Link>
@@ -114,7 +138,7 @@ export const DrawerContent = () => {
           <PaletteIcon color={theme.colors.text} />
           <Text className="ml-6 text-base font-medium">Change theme</Text>
         </TouchableOpacity>
-        {agent?.session?.handle === "mozzius.dev" && (
+        {/* {agent?.session?.handle === "mozzius.dev" && (
           <Link href="/pro" asChild onPress={() => setOpenDrawer(false)}>
             <TouchableOpacity
               accessibilityRole="link"
@@ -125,7 +149,7 @@ export const DrawerContent = () => {
               <Text className="ml-6 text-base font-medium">Graysky Pro</Text>
             </TouchableOpacity>
           </Link>
-        )}
+        )} */}
         <Link href="/settings" asChild onPress={() => setOpenDrawer(false)}>
           <TouchableOpacity
             accessibilityRole="link"