From 00acf64d4dc742f8c70556b1935793f7c73a0235 Mon Sep 17 00:00:00 2001
From: Natalie Bridgers <natalie@iori.local>
Date: Wed, 1 Oct 2025 15:39:43 -0500
Subject: [PATCH 1/5] add web link behavior in sidebar

---
 js/app/components/aqlink.tsx               | 19 ++++++++++++
 js/app/components/sidebar/sidebar-item.tsx | 34 +++++++++++++++-------
 js/app/components/sidebar/sidebar.tsx      | 34 ++++++++++++----------
 3 files changed, 62 insertions(+), 25 deletions(-)

diff --git a/js/app/components/aqlink.tsx b/js/app/components/aqlink.tsx
index 168affb48..f40f510cd 100644
--- a/js/app/components/aqlink.tsx
+++ b/js/app/components/aqlink.tsx
@@ -2,6 +2,7 @@ import {
   Link,
   NavigationProp,
   ParamListBase,
+  useLinkBuilder,
   useNavigation,
 } from "@react-navigation/native";
 import usePlatform from "hooks/usePlatform";
@@ -54,3 +55,21 @@ export function Redirect({ to }: { to: LinkParams }) {
   }, []);
   return <Loading />;
 }
+
+// generates the proper href for a given LinkParams object, for better web support
+export function useAQLinkHref(to: LinkParams): { href?: string } {
+  const { isWeb } = usePlatform();
+  const buildLink = useLinkBuilder();
+
+  if (!isWeb) {
+    return { href: undefined };
+  }
+
+  try {
+    const href = buildLink(to.screen, to.params);
+    return { href };
+  } catch (e) {
+    console.warn("Failed to build link for", to, e);
+    return { href: undefined };
+  }
+}
diff --git a/js/app/components/sidebar/sidebar-item.tsx b/js/app/components/sidebar/sidebar-item.tsx
index 779fa77e9..9748bc132 100644
--- a/js/app/components/sidebar/sidebar-item.tsx
+++ b/js/app/components/sidebar/sidebar-item.tsx
@@ -1,12 +1,17 @@
-import { Text, useTheme } from "@streamplace/components";
+import { DrawerNavigationState, ParamListBase } from "@react-navigation/native";
+import { Text, useTheme, zero } from "@streamplace/components";
+import { useAQLinkHref } from "components/aqlink";
 import React, { ReactNode, useState } from "react";
 import {
+  GestureResponderEvent,
+  Pressable,
   PressableStateCallbackType,
   StyleProp,
   View,
   ViewStyle,
 } from "react-native";
-import { Pressable } from "react-native-gesture-handler";
+
+import {} from "src/router";
 
 export default function SidebarItem({
   icon,
@@ -14,6 +19,7 @@ export default function SidebarItem({
   collapsed,
   active,
   onPress,
+  route,
   style = null,
   tint = "rgba(189, 110, 134)",
 }: {
@@ -24,7 +30,8 @@ export default function SidebarItem({
   label: string | ReactNode;
   collapsed: boolean;
   active: boolean;
-  onPress: () => void;
+  onPress: (event: GestureResponderEvent) => void;
+  route?: DrawerNavigationState<ParamListBase>["routes"][number];
   style?:
     | StyleProp<ViewStyle>
     | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
@@ -32,6 +39,10 @@ export default function SidebarItem({
 }) {
   const [hover, setHover] = useState<boolean>(false);
   const theme = useTheme();
+  const { href } = useAQLinkHref({
+    screen: route?.name || "Home",
+    params: route?.params as any,
+  });
 
   // Handle different icon types - component, JSX element, or function returning JSX
   const renderIcon = () => {
@@ -73,9 +84,18 @@ export default function SidebarItem({
       style={style}
       onHoverIn={() => setHover(true)}
       onHoverOut={() => setHover(false)}
+      role="link"
+      accessibilityLabel={typeof label === "string" ? label : "Sidebar Item"}
+      // @ts-ignore This makes it render as <a> on web!
+      href={href}
     >
       <View
         style={[
+          zero.r.md,
+          zero.layout.flex.row,
+          zero.layout.flex.alignCenter,
+          zero.px[3],
+          zero.gap.all[2],
           {
             backgroundColor:
               hover || active
@@ -84,17 +104,11 @@ export default function SidebarItem({
                     ", " + (active && !hover ? "0.1" : "0.25") + ")",
                   )
                 : undefined,
-            borderRadius: 12,
-            flexDirection: "row",
-            justifyContent: "flex-start",
-            alignItems: "center",
-            paddingHorizontal: 12,
-            gap: 8,
             overflow: "hidden",
           },
         ]}
       >
-        <View style={[{ width: 32, paddingVertical: 12 }]}>{renderIcon()}</View>
+        <View style={[zero.w[8], zero.py[3]]}>{renderIcon()}</View>
         {!collapsed && (
           <View
             style={[
diff --git a/js/app/components/sidebar/sidebar.tsx b/js/app/components/sidebar/sidebar.tsx
index db7de77a5..06b55a97d 100644
--- a/js/app/components/sidebar/sidebar.tsx
+++ b/js/app/components/sidebar/sidebar.tsx
@@ -6,7 +6,7 @@ import {
   ParamListBase,
   useNavigation,
 } from "@react-navigation/native";
-import { Text, useTheme } from "@streamplace/components";
+import { Text, zero } from "@streamplace/components";
 import React from "react";
 import { Image, Platform, View } from "react-native";
 import Animated, {
@@ -44,9 +44,7 @@ export default function Sidebar({
   widthAnim,
   externalItems = [],
 }: SidebarProps) {
-  const theme = useTheme();
   const navigation = useNavigation();
-  // Apply the defined type to the component props
   const animatedSidebarStyle = useAnimatedStyle(() => {
     return {
       minWidth: widthAnim.value,
@@ -61,26 +59,29 @@ export default function Sidebar({
   return (
     <Animated.View
       style={[
-        animatedSidebarStyle, // Apply the animated style
-        { padding: 8, gap: 8, flexDirection: "column" },
+        animatedSidebarStyle,
+        zero.p[2],
+        zero.gap.all[2],
+        zero.layout.flex.column,
       ]}
     >
       <View
         style={[
+          zero.layout.flex.row,
+          zero.layout.flex.alignCenter,
+          zero.gap.all[3],
           {
-            marginTop: Platform.OS === "ios" ? 29 : 12,
+            marginTop: Platform.OS === "ios" ? 29 : 8,
             marginBottom: 20,
-            paddingLeft: 10,
-            gap: 12,
-            flexDirection: "row",
-            justifyContent: "flex-start",
-            alignItems: "center",
+            paddingLeft: 11,
           },
         ]}
       >
         <Image
           source={require("../../assets/images/cube.png")}
-          style={[{ height: 30, width: 28 }]}
+          height={30}
+          width={28}
+          style={{ width: 28, height: 30, resizeMode: "contain" }}
         />
         {!collapsed && <Text size="2xl">Streamplace</Text>}
       </View>
@@ -98,6 +99,7 @@ export default function Sidebar({
           | React.ComponentType<any>
           | undefined;
 
+        console.log("router", route);
         return (
           <SidebarItem
             key={route.key}
@@ -105,9 +107,11 @@ export default function Sidebar({
             label={label}
             active={descriptor.navigation.isFocused()}
             collapsed={collapsed}
-            onPress={() => {
+            route={route}
+            onPress={(ev) => {
+              ev.preventDefault();
               if (route.name === "Home") {
-                // copy logic for 'Home' to reset the stack
+                // reset the stack (b/c streamlist is in the same stack as home)
                 navigation.dispatch(
                   CommonActions.reset({
                     index: 0,
@@ -126,7 +130,7 @@ export default function Sidebar({
               }
             }}
             style={options.drawerItemStyle}
-            tint={options.drawerActiveTintColor as string} // Assuming tint is a string color or undefined
+            tint={options.drawerActiveTintColor as string}
           />
         );
       })}
-- 
2.51.2


From bf2fd1af1888ef09528ce421b4073b3941f2b81c Mon Sep 17 00:00:00 2001
From: Natalie Bridgers <natalie@iori.local>
Date: Wed, 1 Oct 2025 15:42:28 -0500
Subject: [PATCH 2/5] clear up console.logs

---
 js/app/components/sidebar/sidebar-item.tsx | 8 +++++++-
 js/app/components/sidebar/sidebar.tsx      | 1 -
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/js/app/components/sidebar/sidebar-item.tsx b/js/app/components/sidebar/sidebar-item.tsx
index 9748bc132..743baac3c 100644
--- a/js/app/components/sidebar/sidebar-item.tsx
+++ b/js/app/components/sidebar/sidebar-item.tsx
@@ -73,7 +73,13 @@ export default function SidebarItem({
     }
 
     // Fallback
-    console.log("tried to render item, but couldn't", (icon as any).$$typeof);
+    console.log(
+      "tried to render item for route",
+      label,
+      href,
+      ", but couldn't",
+      (icon as any).$$typeof,
+    );
 
     return <Text>📄</Text>;
   };
diff --git a/js/app/components/sidebar/sidebar.tsx b/js/app/components/sidebar/sidebar.tsx
index 06b55a97d..feb044550 100644
--- a/js/app/components/sidebar/sidebar.tsx
+++ b/js/app/components/sidebar/sidebar.tsx
@@ -99,7 +99,6 @@ export default function Sidebar({
           | React.ComponentType<any>
           | undefined;
 
-        console.log("router", route);
         return (
           <SidebarItem
             key={route.key}
-- 
2.51.2


From 27e92052587e1477fbca5f8ca74a65197e9e375e Mon Sep 17 00:00:00 2001
From: Natalie Bridgers <natalie@iori.local>
Date: Wed, 1 Oct 2025 15:48:11 -0500
Subject: [PATCH 3/5] skip rendering "display: none" components

---
 js/app/components/sidebar/sidebar.tsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/js/app/components/sidebar/sidebar.tsx b/js/app/components/sidebar/sidebar.tsx
index feb044550..8139342ce 100644
--- a/js/app/components/sidebar/sidebar.tsx
+++ b/js/app/components/sidebar/sidebar.tsx
@@ -99,6 +99,21 @@ export default function Sidebar({
           | React.ComponentType<any>
           | undefined;
 
+        // if we have style display: none on the drawer item, completely skip rendering it
+        const drawerItemStyle = options.drawerItemStyle;
+        let isHidden = false;
+        if (
+          drawerItemStyle &&
+          typeof drawerItemStyle === "object" &&
+          "display" in drawerItemStyle &&
+          (drawerItemStyle as any).display === "none"
+        ) {
+          isHidden = true;
+        }
+        if (isHidden) {
+          return null;
+        }
+
         return (
           <SidebarItem
             key={route.key}
-- 
2.51.2


From f99073b94fdffe28be200526b752babc002c2993 Mon Sep 17 00:00:00 2001
From: Natalie Bridgers <natalie@iori.local>
Date: Wed, 1 Oct 2025 15:50:20 -0500
Subject: [PATCH 4/5] better accessibility label defaults?

---
 js/app/components/sidebar/sidebar-item.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/app/components/sidebar/sidebar-item.tsx b/js/app/components/sidebar/sidebar-item.tsx
index 743baac3c..1dab7ce52 100644
--- a/js/app/components/sidebar/sidebar-item.tsx
+++ b/js/app/components/sidebar/sidebar-item.tsx
@@ -91,7 +91,7 @@ export default function SidebarItem({
       onHoverIn={() => setHover(true)}
       onHoverOut={() => setHover(false)}
       role="link"
-      accessibilityLabel={typeof label === "string" ? label : "Sidebar Item"}
+      accessibilityLabel={typeof label === "string" ? label : "Link to " + href}
       // @ts-ignore This makes it render as <a> on web!
       href={href}
     >
-- 
2.51.2


From a54f3bf10ac3a8c574bdd382951d70555567fd3a Mon Sep 17 00:00:00 2001
From: Natalie Bridgers <natalie@iori.local>
Date: Thu, 2 Oct 2025 19:41:05 -0500
Subject: [PATCH 5/5] remove weird import?

---
 js/app/components/sidebar/sidebar-item.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/js/app/components/sidebar/sidebar-item.tsx b/js/app/components/sidebar/sidebar-item.tsx
index 1dab7ce52..9dea23b47 100644
--- a/js/app/components/sidebar/sidebar-item.tsx
+++ b/js/app/components/sidebar/sidebar-item.tsx
@@ -11,8 +11,6 @@ import {
   ViewStyle,
 } from "react-native";
 
-import {} from "src/router";
-
 export default function SidebarItem({
   icon,
   label,
-- 
2.51.2