Implement state screen (#22)

* implement basic state screen

* change no state

* remove unused

* add a comment

* add a newline

* clean up

* add client id

* support multiple subscriptions

* remove some unused vars

* separate by clientId

* scope timeline items by client id

* fix security issue

* select a server when it connects

* uncomment

* make sanitize a util function

* fix path

* newline

* more pollution checking

Author: stevenconner

app/app.tsx

@@ -19,6 +19,7 @@ import { MenuItemId } from "./components/Sidebar/SidebarMenu"
 import { HelpScreen } from "./screens/HelpScreen"
 import { TimelineItem } from "./types"
 import { PortalHost } from "./components/Portal"
+import { StateScreen } from "./screens/StateScreen"
 
 if (__DEV__) {
   // This is for debugging Reactotron with ... Reactotron!
@@ -115,6 +116,17 @@ function App(): React.JSX.Element {
   // and handle all websocket events.
   useEffect(() => connectToServer(), [])
 
+  const renderActiveItem = () => {
+    switch (activeItem) {
+      case "help":
+        return <HelpScreen />
+      case "state":
+        return <StateScreen />
+      default:
+        return <TimelineScreen />
+    }
+  }
+
   return (
     <View style={$container()}>
       <Titlebar />
@@ -123,7 +135,7 @@ function App(): React.JSX.Element {
         <Sidebar />
         <View style={$contentContainer}>
           <AppHeader />
-          {activeItem === "help" ? <HelpScreen /> : <TimelineScreen />}
+          {renderActiveItem()}
         </View>
       </View>
       <PortalHost />

app/components/ClientTab.tsx

@@ -12,10 +12,10 @@ export function ClientTab({ clientId }: { clientId: string }) {
   const os: string = clientData?.platform ?? "Unknown"
 
   const [activeTab, setActiveTab] = useGlobal(tabgroup, label, { persist: true })
-  const active = activeTab === label
+  const active = activeTab === clientId
 
   return (
-    <Pressable key={clientId} onPress={() => setActiveTab(label)} style={$container()}>
+    <Pressable key={clientId} onPress={() => setActiveTab(clientId)} style={$container()}>
       <Text style={[$tab(), active ? $tabActive() : {}]}>{label}</Text>
       <Text style={$os()}>{os}</Text>
     </Pressable>

app/components/Divider.tsx

@@ -0,0 +1,13 @@
+import { View } from "react-native"
+import { themed } from "../theme/theme"
+import { ViewStyle, StyleProp } from "react-native"
+
+export function Divider({ extraStyles }: { extraStyles?: StyleProp<ViewStyle> }) {
+  return <View style={[$divider(), extraStyles]} />
+}
+
+const $divider = themed<ViewStyle>(({ colors }) => ({
+  height: 1,
+  backgroundColor: colors.border,
+  width: "100%",
+}))

app/components/Icon.tsx

@@ -66,17 +66,19 @@ export function Icon(props: IconProps) {
 }
 
 export const iconRegistry = {
-  panelLeftClose: require("../../assets/icons/panelLeftClose.png"),
-  panelLeftOpen: require("../../assets/icons/panelLeftOpen.png"),
-  plug: require("../../assets/icons/plug.png"),
-  scrollText: require("../../assets/icons/scrollText.png"),
   chevronsLeftRightEllipsis: require("../../assets/icons/chevronsLeftRightEllipsis.png"),
   circleGauge: require("../../assets/icons/circleGauge.png"),
-  questionMark: require("../../assets/icons/questionMark.png"),
+  clipboard: require("../../assets/icons/clipboard.png"),
   gitHub: require("../../assets/icons/gitHub.png"),
   messageSquare: require("../../assets/icons/messageSquare.png"),
+  panelLeftClose: require("../../assets/icons/panelLeftClose.png"),
+  panelLeftOpen: require("../../assets/icons/panelLeftOpen.png"),
+  plug: require("../../assets/icons/plug.png"),
+  questionMark: require("../../assets/icons/questionMark.png"),
+  scrollText: require("../../assets/icons/scrollText.png"),
   squirrel: require("../../assets/icons/squirrel.png"),
   xLogo: require("../../assets/icons/xLogo.png"),
+  trash: require("../../assets/icons/trash.png"),
 }
 
 const $imageStyleBase: ImageStyle = {

app/components/Sidebar/SidebarMenu.tsx

@@ -6,6 +6,7 @@ import { Icon } from "../Icon"
 const MENU_ITEMS = [
   { id: "logs", label: "Logs", icon: "scrollText" },
   { id: "network", label: "Network", icon: "chevronsLeftRightEllipsis" },
+  { id: "state", label: "State", icon: "clipboard" },
   { id: "performance", label: "Performance", icon: "circleGauge" },
   { id: "plugins", label: "Plugins", icon: "plug" },
   { id: "help", label: "Help", icon: "questionMark" },

app/components/TimelineToolbar.tsx

@@ -4,6 +4,7 @@ export type FilterType = "all" | "log" | "display" | "api.request" | "api.respon
 
 export interface TimelineFilters {
   types: FilterType[]
+  clientId: string
   // logLevel: LogLevel
   // sortBy: SortBy
 }

app/screens/HelpScreen.tsx

@@ -1,13 +1,14 @@
 import { View, Text, ViewStyle, TextStyle, Pressable, Linking, ScrollView } from "react-native"
 import { themed, useThemeName } from "../theme/theme"
 import { Icon, IconTypes } from "../components/Icon"
+import { Divider } from "../components/Divider"
 
 export function HelpScreen() {
   return (
     <ScrollView style={$container()}>
       <View style={$connectContainer()}>
         <Text style={$title()}>{"Let's Connect!"}</Text>
-        <View style={$divider()} />
+        <Divider extraStyles={$divider()} />
         <View style={$connectRow()}>
           <ConnectItem
             icon="gitHub"
@@ -27,7 +28,7 @@ export function HelpScreen() {
           <ConnectItem icon="xLogo" title="@reactotron" url="https://x.com/reactotron" />
         </View>
         <Text style={$title()}>Keystrokes</Text>
-        <View style={$divider()} />
+        <Divider extraStyles={$divider()} />
         <View style={$keystrokesContainer()}>
           <Text style={$keystrokeSectionTitle()}>Navigation</Text>
           <KeystrokeItem title="Toggle Sidebar" keystrokes={["⌘", "b"]} />
@@ -89,10 +90,7 @@ const $title = themed<TextStyle>(({ colors, typography, spacing }) => ({
   marginTop: spacing.xl,
 }))
 
-const $divider = themed<ViewStyle>(({ colors, spacing }) => ({
-  height: 1,
-  backgroundColor: colors.border,
-  width: "100%",
+const $divider = themed<ViewStyle>(({ spacing }) => ({
   marginTop: spacing.md,
 }))
 
@@ -140,7 +138,7 @@ const $keystrokeKey = themed<ViewStyle>(({ spacing, colors }) => ({
   alignItems: "center",
 }))
 
-const $keystroke = themed<TextStyle>(({ colors, spacing }) => ({
+const $keystroke = themed<TextStyle>(({ colors }) => ({
   fontSize: 16,
   fontWeight: "bold",
   color: colors.mainText,