UI changes (#26)

* get rid of the app header, and integrate the information from it to other places

* make clear button only get rid of current clientId stuff

* add a cursor pointer for clear button

* Update app/screens/TimelineScreen.tsx

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

* remove console log

---------

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

Author: stevenconner

app/app.tsx

@@ -13,7 +13,6 @@ import { useMenuItem } from "./utils/useMenuItem"
 import { Titlebar } from "./components/Titlebar/Titlebar"
 import { Sidebar } from "./components/Sidebar/Sidebar"
 import { useSidebar } from "./state/useSidebar"
-import { AppHeader } from "./components/AppHeader"
 import { useGlobal, withGlobal } from "./state/useGlobal"
 import { MenuItemId } from "./components/Sidebar/SidebarMenu"
 import { HelpScreen } from "./screens/HelpScreen"
@@ -133,10 +132,7 @@ function App(): React.JSX.Element {
       <StatusBar barStyle={"dark-content"} backgroundColor={colors.background} />
       <View style={$mainContent}>
         <Sidebar />
-        <View style={$contentContainer}>
-          <AppHeader />
-          {renderActiveItem()}
-        </View>
+        <View style={$contentContainer}>{renderActiveItem()}</View>
       </View>
       <PortalHost />
     </View>

app/components/AppHeader.tsx

@@ -1,5 +1,5 @@
-import { Button } from "react-native"
-import { withGlobal } from "../state/useGlobal"
+import { Button, StyleProp, View, ViewStyle } from "react-native"
+import { useGlobal, withGlobal } from "../state/useGlobal"
 import type { TimelineItem } from "../types"
 import { useCallback } from "react"
 import { useKeyboardEvents } from "../utils/system"
@@ -15,7 +15,18 @@ export function ClearLogsButton() {
   const [_timelineItems, setTimelineItems] = withGlobal<TimelineItem[]>("timelineItems", [], {
     persist: true,
   })
-  const clearLogs = useCallback(() => setTimelineItems([]), [setTimelineItems])
+  const [activeClientId] = useGlobal("activeClientId", "")
+  const clearLogs = useCallback(() => {
+    setTimelineItems((prev) => prev.filter((item) => item.clientId !== activeClientId))
+  }, [setTimelineItems])
 
-  return <Button onPress={clearLogs} title="Clear" />
+  return (
+    <View style={$buttonContainer}>
+      <Button onPress={clearLogs} title="Clear" />
+    </View>
+  )
+}
+
+const $buttonContainer: StyleProp<ViewStyle> = {
+  cursor: "pointer",
 }

app/components/ClearLogsButton.tsx

@@ -1,46 +1,61 @@
 import type { ClientData } from "../types"
 import { useGlobal } from "../state/useGlobal"
 import { themed } from "../theme/theme"
-import { Pressable, Text, TextStyle, ViewStyle } from "react-native"
+import { Pressable, Text, TextStyle, View, ViewStyle } from "react-native"
 
 const tabgroup = "activeClientId"
 
 export function ClientTab({ clientId }: { clientId: string }) {
   const [clientData] = useGlobal<ClientData>(`client-${clientId}`, {} as ClientData)
-
-  const label: string = (clientData?.name ?? clientId) + "\n"
-  const os: string = clientData?.platform ?? "Unknown"
+  const label: string = clientData?.name ?? clientId
+  const platformVersion: string = clientData?.platformVersion ?? ""
 
   const [activeTab, setActiveTab] = useGlobal(tabgroup, label, { persist: true })
   const active = activeTab === clientId
 
+  const getOsLabel = (os: string) => {
+    switch (os) {
+      case "ios":
+        return "iOS"
+      case "android":
+        return "Android"
+      default:
+        return "Unknown OS"
+    }
+  }
+
   return (
-    <Pressable key={clientId} onPress={() => setActiveTab(clientId)} style={$container()}>
-      <Text style={[$tab(), active ? $tabActive() : {}]}>{label}</Text>
-      <Text style={$os()}>{os}</Text>
-    </Pressable>
+    <View style={[$container(), active && $containerActive()]}>
+      <Pressable key={clientId} onPress={() => setActiveTab(clientId)}>
+        <Text numberOfLines={2} style={[$tab(), active && $tabActive()]}>
+          {`${label} - ${getOsLabel(clientData?.platform)} ${platformVersion}`}
+        </Text>
+      </Pressable>
+    </View>
   )
 }
 
+const $containerActive = themed<ViewStyle>(({ colors }) => ({
+  backgroundColor: colors.cardBackground,
+}))
+
 const $container = themed<ViewStyle>(({ spacing }) => ({
-  flexDirection: "column",
-  alignItems: "flex-start",
   gap: spacing.xxs,
   cursor: "pointer",
+  borderTopLeftRadius: 8,
+  borderTopRightRadius: 8,
+  height: 32,
+  alignItems: "center",
+  justifyContent: "center",
+  paddingHorizontal: spacing.xl,
 }))
 
-const $tab = themed<TextStyle>(({ spacing, colors }) => ({
-  fontSize: spacing.md,
-  color: colors.mainText,
-}))
-
-const $tabActive = themed<TextStyle>(({ colors }) => ({
-  borderBottomColor: colors.primary,
-  color: colors.mainText,
-  textDecorationLine: "underline",
+const $tabActive = themed<TextStyle>(() => ({
+  fontWeight: "600",
 }))
 
-const $os = themed<TextStyle>(({ colors }) => ({
-  fontSize: 12,
+const $tab = themed<TextStyle>(({ colors }) => ({
+  fontSize: 14,
   color: colors.mainText,
+  textAlign: "center",
 }))

app/components/ClientTab.tsx

@@ -1,8 +1,10 @@
-import { Animated, View, ViewStyle, StyleSheet } from "react-native"
+import { Animated, View, ViewStyle, StyleSheet, Pressable } from "react-native"
 import { themed } from "../../theme/theme"
 import { AnimatedReactotronLogo } from "./AnimatedReactotronLogo"
 import { useSidebarAnimationProgress } from "./useSidebarAnimationProgress"
 import { SidebarMenu } from "./SidebarMenu"
+import { Tooltip } from "../Tooltip"
+import { getReactotronAppId } from "../../state/connectToServer"
 
 // Expanded sidebar width in px
 const EXPANDED_WIDTH = 250
@@ -12,17 +14,23 @@ const COLLAPSED_WIDTH = 60
 
 export const Sidebar = () => {
   const { progress, mounted } = useSidebarAnimationProgress()
+  const reactotronAppId = getReactotronAppId()
 
   const animatedWidth = progress.interpolate({
     inputRange: [0, 1],
     outputRange: [COLLAPSED_WIDTH, EXPANDED_WIDTH],
   })
+  console.log("progress", progress)
 
   return (
     <Animated.View style={[{ width: animatedWidth }, $overflowHidden]}>
       <View style={$container()}>
         <View style={$content()}>
-          <AnimatedReactotronLogo progress={progress} mounted={mounted} />
+          <Tooltip label={`Reactotron ID: ${reactotronAppId}`}>
+            <Pressable disabled={true}>
+              <AnimatedReactotronLogo progress={progress} mounted={mounted} />
+            </Pressable>
+          </Tooltip>
           <SidebarMenu progress={progress} mounted={mounted} collapsedWidth={COLLAPSED_WIDTH} />
         </View>
       </View>
@@ -48,4 +56,7 @@ const $container = themed<ViewStyle>((theme) => ({
 const $content = themed<ViewStyle>((theme) => ({
   flex: 1,
   padding: theme.spacing.sm,
+  flexDirection: "column",
+  justifyContent: "space-between",
+  height: "100%",
 }))