Network tab filtering, basic search functionality (#19)

* implement basic search functionality

* fix types

* remove log

* Style fix

* Update app/components/AppHeader.tsx

Co-authored-by: Sean Barker <43788519+SeanBarker182@users.noreply.github.com>
Signed-off-by: Steven Conner <steven.c.conner@gmail.com>

* integrate memoization

---------

Signed-off-by: Steven Conner <steven.c.conner@gmail.com>
Co-authored-by: Sean Barker <theseanbarker@gmail.com>
Co-authored-by: Sean Barker <43788519+SeanBarker182@users.noreply.github.com>

Author: stevenconner

app/components/AppHeader.tsx

@@ -20,6 +20,7 @@ export function AppHeader() {
   const [isConnected] = useGlobal("isConnected", false)
   const [error] = useGlobal("error", null)
   const [clientIds] = useGlobal("clientIds", [])
+  const [search, setSearch] = useGlobal("search", "")
   const arch = (global as any)?.nativeFabricUIManager ? "Fabric" : "Paper"
 
   return (
@@ -31,9 +32,14 @@ export function AppHeader() {
       </View>
       <HeaderTitle title={`Reactotron ${reactotronAppId}`} />
       <View style={$statusRow()}>
-        <View>
-          <TextInput value={"SEARCHING"} placeholder="Search" style={$searchInput} />
-          <Text>Search</Text>
+        <View style={$searchContainer()}>
+          <TextInput
+            value={search}
+            placeholder="Search"
+            style={$searchInput()}
+            placeholderTextColor={theme === "dark" ? "white" : "black"}
+            onChangeText={setSearch}
+          />
         </View>
         <View style={$statusItem()}>
           <View style={[$dot(), error ? $dotRed() : isConnected ? $dotGreen() : $dotGray()]} />
@@ -103,4 +109,16 @@ const $statusText = themed<TextStyle>(({ colors }) => ({
   fontWeight: "600",
 }))
 
-const $searchInput: ViewStyle = { width: 100 }
+const $searchInput = themed<TextStyle>(({ colors, typography, spacing }) => ({
+  width: 140,
+  fontSize: typography.body,
+  backgroundColor: colors.background,
+  borderWidth: 1,
+  borderRadius: 4,
+  padding: spacing.xxs,
+  zIndex: 1,
+}))
+
+const $searchContainer = themed<ViewStyle>(({ spacing }) => ({
+  marginRight: spacing.md,
+}))

app/components/Sidebar/SidebarMenu.tsx

@@ -10,7 +10,7 @@ const MENU_ITEMS = [
   { id: "plugins", label: "Plugins", icon: "plug" },
 ] as const
 
-type MenuItemId = (typeof MENU_ITEMS)[number]["id"]
+export type MenuItemId = (typeof MENU_ITEMS)[number]["id"]
 
 interface SidebarMenuProps {
   progress: Animated.Value
@@ -34,7 +34,7 @@ export const SidebarMenu = ({ progress, mounted, collapsedWidth }: SidebarMenuPr
    * - centers the icon when collapsed without animating padding
    * - becomes the left column when expanded (outer padding forms the gutter)
    */
-  const iconColumnWidth = collapsedWidth - theme.spacing.sm * 2
+  const iconColumnWidth = collapsedWidth - theme.spacing.sm * 2.8
 
   return (
     <View style={$menu}>
@@ -47,15 +47,14 @@ export const SidebarMenu = ({ progress, mounted, collapsedWidth }: SidebarMenuPr
               $menuItem(),
               active && $menuItemActive(),
               pressed && $menuItemPressed,
-              $menuItemLabel(),
             ]}
             onPress={() => setActiveItem(item.id)}
             accessibilityRole="button"
             accessibilityState={{ selected: active }}
             accessibilityLabel={item.label}
           >
             {/* Fixed-width icon column (centers icon when collapsed) */}
-            <View style={[{ width: iconColumnWidth }, $iconColumn]}>
+            <View style={[{ width: iconColumnWidth }, $iconColumn()]}>
               <Icon
                 icon={item.icon}
                 size={18}
@@ -111,16 +110,13 @@ const $menuItemText = themed<TextStyle>((theme) => ({
   fontSize: theme.typography.caption,
   color: theme.colors.mainText,
   fontWeight: "700",
+  marginLeft: theme.spacing.xs,
 }))
 
 const $menuItemTextActive = themed<TextStyle>((theme) => ({
   color: theme.colors.mainTextInverted,
 }))
 
-const $iconColumn: ViewStyle = {
-  alignItems: "center",
-}
-
-const $menuItemLabel = themed<TextStyle>(({ spacing }) => ({
+const $iconColumn = themed<ViewStyle>(({ spacing }) => ({
   marginLeft: spacing.xs,
 }))

app/screens/TimelineScreen.tsx

@@ -12,6 +12,9 @@ import { Separator } from "../components/Separator"
 import { themed, useThemeName } from "../theme/theme"
 import { $flex, $row } from "../theme/basics"
 import { useTimeline } from "../utils/useTimeline"
+import { MenuItemId } from "app/components/Sidebar/SidebarMenu"
+import { useEffect } from "react"
+import { FilterType } from "app/components/TimelineToolbar"
 
 /**
  * Renders the correct component for each timeline item.
@@ -46,13 +49,31 @@ const TimelineItemRenderer = ({
   return null
 }
 
+function getTimelineTypes(activeItem: MenuItemId): FilterType[] {
+  switch (activeItem) {
+    case "logs":
+      return ["log", "display"]
+    case "network":
+      return ["api.request", "api.response"]
+    default:
+      return ["log", "display", "api.request", "api.response"]
+  }
+}
+
 export function TimelineScreen() {
-  // TODO: Use a global state for the filters, set by the user in the TimelineToolbar
-  const timelineItems = useTimeline({ types: ["log", "display", "api.request", "api.response"] })
+  const [activeItem] = useGlobal<MenuItemId>("sidebar-active-item", "logs", {
+    persist: true,
+  })
+  const timelineItems = useTimeline({
+    types: getTimelineTypes(activeItem),
+  })
   const [timelineWidth, setTimelineWidth] = useGlobal<number>("timelineWidth", 300, {
     persist: true,
   })
   const { selectedItem, setSelectedItemId } = useSelectedTimelineItems()
+  useEffect(() => {
+    setSelectedItemId(null)
+  }, [activeItem])
 
   const handleSelectItem = (item: TimelineItem) => {
     // Toggle selection: if clicking the same item, deselect it

app/utils/normalize.ts

@@ -0,0 +1,7 @@
+export function normalize(v: unknown): string {
+  return String(v ?? "")
+    .toLowerCase()
+    .trim()
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "")
+}

app/utils/safeTime.ts

@@ -0,0 +1,4 @@
+export function safeTime(d: unknown): number {
+  const t = new Date(String(d ?? "")).getTime()
+  return Number.isFinite(t) ? t : 0
+}

app/utils/useTimeline.ts

@@ -1,20 +1,57 @@
 import { TimelineItem } from "../types"
 import { TimelineFilters } from "../components/TimelineToolbar"
 import { useGlobal } from "../state/useGlobal"
+import { useMemo } from "react"
+import { normalize } from "./normalize"
+import { safeTime } from "./safeTime"
 
 export function useTimeline(filters: TimelineFilters): TimelineItem[] {
   const [items] = useGlobal<TimelineItem[]>("timelineItems", [], { persist: true })
+  const [search] = useGlobal("search", "")
 
-  const filteredItems = items.filter((item) => {
-    // if there are any filters selected, only show items that match the filters
-    return filters.types.includes(item.type)
-  })
+  return useMemo(() => {
+    // 1) Types filter: if none selected, show everything
+    const byType =
+      (filters.types?.length ?? 0) === 0
+        ? items.slice() // clone so we can sort safely later
+        : items.filter((item) => filters.types.includes(item.type))
 
-  filteredItems.sort((a, b) => {
-    return new Date(b.date).getTime() - new Date(a.date).getTime()
-  })
+    // 2) Search (normalize once)
+    const q = normalize(search)
+    const visited = new WeakSet<object>()
+    const matches = (val: unknown): boolean => {
+      if (val === null || val === undefined) return false
 
-  return filteredItems
+      if (typeof val === "string" || typeof val === "number" || typeof val === "boolean") {
+        return normalize(val).includes(q)
+      }
+      if (val instanceof Date) {
+        return normalize(val.toISOString()).includes(q)
+      }
+      if (Array.isArray(val)) {
+        for (const v of val) if (matches(v)) return true
+        return false
+      }
+      if (typeof val === "object") {
+        const obj = val as Record<string, unknown>
+        if (visited.has(obj)) return false
+        visited.add(obj)
+        for (const k in obj) {
+          if (matches(obj[k])) return true
+        }
+        return false
+      }
+
+      return false
+    }
+
+    const bySearch = q ? byType.filter((item) => matches(item)) : byType
+
+    // 3) Sort newest first, safely handling bad dates
+    bySearch.sort((a, b) => safeTime(b.date) - safeTime(a.date))
+
+    return bySearch
+  }, [items, JSON.stringify(filters.types ?? []), search])
 
   // TODO: User controlled sorting and level filtering