Merge pull request #143 from streamplace/natb/home-components

design: custom sidebar for non-mobile devices

js/app/components/sidebar/sidebar-item.tsx

···
+import { FileQuestion } from "@tamagui/lucide-icons";
+import { Text, View, AnimatePresence } from "tamagui";
+import { Pressable } from "react-native-gesture-handler";
+import { ReactNode, useState } from "react";
+import { PressableStateCallbackType, StyleProp, ViewStyle } from "react-native";
+
+export default function SidebarItem({
+  icon,
+  label,
+  collapsed,
+  active,
+  onPress,
+  style = null,
+  tint = "rgba(189, 110, 134)",
+}: {
+  icon: React.ComponentType<any> | React.NamedExoticComponent<any>;
+  label: React.ComponentType<any> | string | ReactNode;
+  collapsed: boolean;
+  active: boolean;
+  onPress: () => void;
+  style?:
+    | StyleProp<ViewStyle>
+    | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
+  tint: string;
+}) {
+  const [hover, setHover] = useState<boolean>(false);
+  // if we don't have an icon for some reason default to filequestion
+  const Icon: React.NamedExoticComponent<any> = (icon as any) || FileQuestion;
+  return (
+    <Pressable
+      onPress={onPress}
+      style={style}
+      onHoverIn={() => setHover(true)}
+      onHoverOut={() => setHover(false)}
+      role="button"
+    >
+      <View
+        backgroundColor={
+          hover || active
+            ? tint.replace(
+                ")",
+                ", " + (active && !hover ? "0.1" : "0.25") + ")",
+              )
+            : undefined
+        }
+        borderRadius="$radius.3"
+        flexDirection="row"
+        justifyContent="flex-start"
+        alignItems="center"
+        paddingHorizontal="$3"
+        gap="$2"
+        overflow="hidden"
+      >
+        <View width="$3" paddingVertical="$3">
+          <Icon color="$color" />
+        </View>
+        <AnimatePresence>
+          {!collapsed && (
+            <Text
+              // setting to maximum width of the sidebar
+              // so we don't get collapsing text on collapse
+              minWidth={270}
+              maxHeight="auto"
+              fontSize="$6"
+              textAlign="left"
+              animation="quick"
+              enterStyle={{ opacity: 100, width: "100" }}
+              exitStyle={{ opacity: 0, width: "100" }}
+              animateOnly={["opacity"]}
+            >
+              {label}
+            </Text>
+          )}
+        </AnimatePresence>
+      </View>
+    </Pressable>
+  );
+}

js/app/components/sidebar/sidebar.tsx

···
+import { YStack, styled, Text, View, Image } from "tamagui";
+import { SharedValue, useAnimatedStyle } from "react-native-reanimated";
+import SidebarItem from "./sidebar-item";
+import {
+  CommonActions,
+  DrawerNavigationState,
+  ParamListBase,
+} from "@react-navigation/native";
+import { DrawerNavigationOptions } from "@react-navigation/drawer";
+import { DrawerDescriptorMap } from "@react-navigation/drawer/lib/typescript/src/types";
+import { Platform } from "react-native";
+import { FileQuestion } from "@tamagui/lucide-icons";
+
+const AnimatedYStack = styled(YStack, {
+  name: "AnimatedYStack",
+});
+
+export interface ExternalDrawerItem {
+  item: React.NamedExoticComponent<any>;
+  label: React.ComponentType<any> | string;
+  onPress: () => void;
+}
+
+interface CustomSidebarProps {
+  collapsed: boolean;
+  widthAnim: SharedValue<number>;
+  descriptors: DrawerDescriptorMap;
+  state: DrawerNavigationState<ParamListBase>;
+  externalItems?: ExternalDrawerItem[];
+}
+
+// Combine standard drawer props with custom props
+type SidebarProps = CustomSidebarProps & DrawerNavigationOptions;
+
+export default function Sidebar({
+  state,
+  descriptors,
+  collapsed,
+  widthAnim,
+  externalItems = [],
+}: SidebarProps) {
+  // Apply the defined type to the component props
+  const animatedSidebarStyle = useAnimatedStyle(() => {
+    return {
+      minWidth: widthAnim.value,
+      maxWidth: widthAnim.value,
+    };
+  });
+
+  return (
+    <AnimatedYStack
+      style={animatedSidebarStyle} // Apply the animated style
+      padding="$2"
+      gap="$2"
+    >
+      <View
+        marginTop={Platform.OS === "ios" ? 29 : 12}
+        marginBottom="$5"
+        paddingLeft="$2.5"
+        gap="$3"
+        flexDirection="row"
+        justifyContent="flex-start"
+        alignItems="center"
+      >
+        <Image
+          source={require("../../assets/images/cube.png")}
+          height="$2"
+          width="$2"
+        />
+        {!collapsed && (
+          <Text fontSize="$7" minWidth={200} numberOfLines={1}>
+            Streamplace
+          </Text>
+        )}
+      </View>
+
+      {state.routes.map((route) => {
+        const descriptor = descriptors[route.key];
+        const options = descriptor?.options ?? {};
+
+        const label =
+          typeof options.drawerLabel === "function"
+            ? options.drawerLabel({ focused: false, color: "$color" })
+            : (options.drawerLabel ?? options.title ?? route.name);
+
+        const IconComponent = options.drawerIcon as
+          | React.ComponentType<any>
+          | undefined;
+
+        return (
+          <SidebarItem
+            key={route.key}
+            icon={IconComponent ? IconComponent : FileQuestion}
+            label={label}
+            active={descriptor.navigation.isFocused()}
+            collapsed={collapsed}
+            onPress={() => {
+              if (route.name === "Home") {
+                // copy logic for 'Home' to reset the stack
+                descriptor.navigation.dispatch(
+                  CommonActions.reset({
+                    index: 0,
+                    routes: [
+                      {
+                        name: "Home",
+                        state: {
+                          routes: [{ name: "StreamList" }],
+                        },
+                      },
+                    ],
+                  }),
+                );
+              } else {
+                descriptor.navigation.navigate(route.name);
+              }
+            }}
+            style={options.drawerItemStyle}
+            tint={options.drawerActiveTintColor as string} // Assuming tint is a string color or undefined
+          />
+        );
+      })}
+      {externalItems.map((i) => {
+        return (
+          <SidebarItem
+            key={JSON.stringify(i.label)}
+            icon={i.item}
+            label={i.label || "Fix this label!"}
+            active={false}
+            collapsed={collapsed}
+            onPress={() => i.onPress()}
+            tint="rgba(189, 110, 134)"
+          />
+        );
+      })}
+    </AnimatedYStack>
+  );
+}

js/app/features/base/sidebarSlice.tsx

···
+import { createAppSlice } from "../../hooks/createSlice";
+import WebStorage from "../../storage/storage";
+
+const storage = new WebStorage();
+export const SIDEBAR_STORAGE_KEY = "sidebarState";
+
+export interface SidebarState {
+  isCollapsed: boolean;
+  targetWidth: number;
+  isLoaded: boolean;
+}
+
+const initialState: SidebarState = {
+  isCollapsed: false,
+  targetWidth: 250,
+  isLoaded: false,
+};
+
+export const sidebarSlice = createAppSlice({
+  name: "sidebar",
+  initialState,
+  reducers: (create) => ({
+    toggleSidebar: create.reducer((state) => {
+      state.isCollapsed = !state.isCollapsed;
+      state.targetWidth = state.isCollapsed ? 64 : 250;
+    }),
+    loadStateFromStorage: create.asyncThunk(
+      async () => {
+        const storedStateString = await storage.getItem(SIDEBAR_STORAGE_KEY);
+        if (storedStateString) {
+          return JSON.parse(storedStateString) as SidebarState;
+        }
+        return null;
+      },
+      {
+        pending: (state) => {
+          // unlikely that this will hang for a noticeable duration
+        },
+        fulfilled: (state, action) => {
+          if (action.payload) {
+            state.isCollapsed = action.payload.isCollapsed;
+            state.targetWidth = action.payload.targetWidth;
+            console.log(
+              "Sidebar state loaded from localStorage:",
+              action.payload,
+            );
+          } else {
+            console.log(
+              "No sidebar state found in localStorage, using defaults.",
+            );
+          }
+          state.isLoaded = true;
+        },
+        rejected: (state, action) => {
+          state.isLoaded = true;
+          console.error(
+            "Failed to load sidebar state from storage:",
+            action.error,
+          );
+        },
+      },
+    ),
+  }),
+  selectors: {
+    selectIsSidebarCollapsed: (state) => state.isCollapsed,
+    selectSidebarTargetWidth: (state) => state.targetWidth,
+    selectIsSidebarLoaded: (state) => state.isLoaded,
+  },
+});
+
+export const { toggleSidebar, loadStateFromStorage } = sidebarSlice.actions;
+export const {
+  selectIsSidebarCollapsed,
+  selectSidebarTargetWidth,
+  selectIsSidebarLoaded,
+} = sidebarSlice.selectors;

js/app/hooks/useSidebarControl.tsx

···
+import { useEffect } from "react";
+import {
+  SharedValue,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { useWindowDimensions } from "tamagui";
+import { useDispatch, useSelector } from "react-redux";
+
+import {
+  toggleSidebar,
+  selectIsSidebarCollapsed,
+  selectSidebarTargetWidth,
+} from "../features/base/sidebarSlice";
+import { RootState } from "../store/store";
+
+// Returns *true* if the screen is > 1024px
+function useIsLargeScreen() {
+  const { width } = useWindowDimensions();
+  return width >= 1024;
+}
+
+export interface UseSidebarOutput {
+  isActive: boolean;
+  isCollapsed: boolean;
+  animatedWidth: SharedValue<number>;
+  toggle: () => void;
+}
+
+/*
+ * useSidebarControl
+ * A hook to control the custom sidebar on desktop, using Redux for state.
+ *
+ * Returns: An interface containing:
+ * - isActive: boolean - True if the screen is considered large (width >= 1024px).
+ * - isCollapsed: boolean - The current collapsed state of the sidebar from Redux.
+ * - animatedWidth: SharedValue<number> - An animated value controlling the sidebar's width.
+ * - toggle: () => void - A function to dispatch the Redux action to toggle the sidebar.
+ */
+export function useSidebarControl(): UseSidebarOutput {
+  const dispatch = useDispatch();
+  const isCollapsed = useSelector((state: RootState) =>
+    selectIsSidebarCollapsed(state),
+  );
+  const targetWidth = useSelector((state: RootState) =>
+    selectSidebarTargetWidth(state),
+  );
+
+  const animatedWidth = useSharedValue(targetWidth);
+
+  const isActive = useIsLargeScreen();
+
+  useEffect(() => {
+    if (isActive) {
+      // Only animate if the sidebar is active
+      animatedWidth.value = withTiming(targetWidth, { duration: 250 });
+    } else {
+      animatedWidth.value = targetWidth;
+    }
+  }, [targetWidth, isActive, animatedWidth]);
+
+  const handleToggle = () => {
+    if (isActive) {
+      // Only allow toggle if the sidebar functionality is active
+      dispatch(toggleSidebar());
+    }
+  };
+
+  return {
+    isActive,
+    isCollapsed,
+    animatedWidth,
+    toggle: handleToggle,
+  };
+}

js/app/src/router.tsx

···
   ShieldQuestion,
   Download,
   Video,
+  PanelLeftOpen,
+  PanelLeftClose,
   Book,
   ExternalLink,
 } from "@tamagui/lucide-icons";
···
 import StreamList from "components/stream-list/stream-list";
 import { selectUserProfile } from "features/bluesky/blueskySlice";
 import usePlatform from "hooks/usePlatform";
-import { useEffect, useState } from "react";
+import { ReactElement, useEffect, useState } from "react";
 import {
   ImageBackground,
   ImageSourcePropType,
   Linking,
+  Platform,
   Pressable,
   StatusBar,
 } from "react-native";
 import { useAppDispatch, useAppSelector } from "store/hooks";
-import { useTheme, Text, View, H3 } from "tamagui";
+import { useTheme, Text, View, H3, useWindowDimensions } from "tamagui";
 import AppReturnScreen from "./screens/app-return";
 import MultiScreen from "./screens/multi";
 import StreamScreen from "./screens/stream";
···
 import Popup from "components/popup";
 import PopoutChat from "./screens/chat-popout";
 import EmbedScreen from "./screens/embed";
+import { useSidebarControl } from "hooks/useSidebarControl";
+import Sidebar, { ExternalDrawerItem } from "components/sidebar/sidebar";
+
+// probabl should move this
+import { store } from "store/store";
+import { loadStateFromStorage } from "features/base/sidebarSlice";
+
+store.dispatch(loadStateFromStorage());
+
 function HomeScreen() {
   return (
     <View f={1}>
···
 const Drawer = createDrawerNavigator();
 
 const NavigationButton = ({ canGoBack }: { canGoBack?: boolean }) => {
+  const sidebar = useSidebarControl();
   const navigation = useNavigation();
+
+  const handlePress = () => {
+    if (sidebar?.isActive) {
+      sidebar.toggle();
+    }
+  };
+
+  const handleGoBackPress = () => {
+    if (canGoBack) {
+      navigation.goBack();
+    } else {
+      navigation.dispatch(DrawerActions.toggleDrawer());
+    }
+  };
+
+  console.log("sidebar", sidebar);
+
+  let icon: ReactElement | null = null;
+  if (sidebar?.isActive) {
+    if (sidebar.isCollapsed) {
+      icon = <PanelLeftOpen />;
+    } else {
+      icon = <PanelLeftClose />;
+    }
+  }
+
   return (
-    <Pressable
-      style={{ padding: 10 }}
-      onPress={() => {
-        if (canGoBack) {
-          navigation.goBack();
-        } else {
-          navigation.dispatch(DrawerActions.toggleDrawer());
-        }
-      }}
+    <View
+      flexDirection="row"
+      marginLeft={Platform.OS === "android" ? "$0" : "$3"}
+      marginRight={Platform.OS === "android" ? "$3" : "$0"}
     >
-      {canGoBack ? <ArrowLeft /> : <Menu />}
-    </Pressable>
+      {icon && (
+        <Pressable style={{ padding: 5 }} onPress={handlePress}>
+          {icon}
+        </Pressable>
+      )}
+      <Pressable style={{ padding: 5 }} onPress={handleGoBackPress}>
+        {canGoBack ? <ArrowLeft /> : sidebar?.isActive || <Menu />}
+      </Pressable>
+    </View>
   );
 };
 
···
   );
 };
 
+const EXTERNAL_ITEMS: ExternalDrawerItem[] = [
+  {
+    item: Book,
+    label: (
+      <Text alignSelf="flex-start">
+        Documentation{" "}
+        <ExternalLink size={16} pl={4} position="relative" top={2} />
+      </Text>
+    ) as any,
+    onPress: () => {
+      const u = new URL(window.location.href);
+      u.pathname = "/docs";
+      Linking.openURL(u.toString());
+    },
+  },
+];
+
+// TODO: merge in ^
 function CustomDrawerContent(props) {
   return (
     <DrawerContentScrollView {...props}>
···
   const [poppedUp, setPoppedUp] = useState(false);
   const [livePopup, setLivePopup] = useState(false);
 
+  const sidebar = useSidebarControl();
+
   // Top-level stuff to handle push notification registration
   useEffect(() => {
     dispatch(hydrate());
···
     <>
       <StatusBar backgroundColor={theme.background.val} />
       <Drawer.Navigator
+        // if this isn't here there are issues around drawer width
+        key={sidebar.isActive ? "1" : "0"}
         initialRouteName="Home"
         screenOptions={{
+          // for the custom sidebar
+          drawerType: sidebar.isActive ? "permanent" : "front",
+          swipeEnabled: !sidebar.isActive,
+          drawerStyle: {
+            // afaict the drawer is a RN Animated component internally
+            // TODO (nat): look into this and change width prop as needed
+            width: sidebar.isActive
+              ? (sidebar.animatedWidth as any)
+              : undefined,
+          },
+          // rest
           headerLeft: () => <NavigationButton />,
           headerRight: () => <AvatarButton />,
           drawerActiveTintColor: theme.accentColor.val,
           unmountOnBlur: true,
         }}
-        drawerContent={CustomDrawerContent}
+        drawerContent={
+          sidebar.isActive
+            ? (props) => (
+                <Sidebar
+                  {...props}
+                  collapsed={sidebar.isCollapsed}
+                  widthAnim={sidebar.animatedWidth}
+                  externalItems={EXTERNAL_ITEMS}
+                />
+              )
+            : CustomDrawerContent
+        }
       >
         <Drawer.Screen
           name="Home"

js/app/store/listener.ts

···
+import { createListenerMiddleware, isAnyOf } from "@reduxjs/toolkit";
+import { SIDEBAR_STORAGE_KEY, sidebarSlice } from "features/base/sidebarSlice";
+import { RootState } from "./store";
+import storage from "storage";
+
+export const listenerMiddleware = createListenerMiddleware();
+
+listenerMiddleware.startListening({
+  matcher: isAnyOf(sidebarSlice.actions.toggleSidebar),
+  effect: async (action, listenerApi) => {
+    const state = listenerApi.getState() as RootState;
+    const sidebarStateToSave = state.sidebar;
+
+    try {
+      await storage.setItem(
+        SIDEBAR_STORAGE_KEY,
+        JSON.stringify(sidebarStateToSave),
+      );
+      console.log("Sidebar state saved to localStorage.");
+    } catch (error) {
+      console.error("Failed to save sidebar state to storage:", error);
+    }
+  },
+});

js/app/store/store.tsx

···
 import { blueskySlice } from "features/bluesky/blueskySlice";
 import { platformSlice } from "features/platform/platformSlice";
 import { playerSlice } from "features/player/playerSlice";
+import { sidebarSlice } from "features/base/sidebarSlice";
+
+import { listenerMiddleware } from "./listener";
 
 const rootReducer = combineSlices(
   blueskySlice,
   streamplaceSlice,
   platformSlice,
   playerSlice,
+  sidebarSlice,
   baseSlice,
 );
 
···
           // Ignore these paths in the state
           ignoredPaths: [/^bluesky\..*/],
         },
-      });
+      }).prepend(listenerMiddleware.middleware);
     },
     preloadedState,
   });