@buoy-gg/route-events 1.7.2

package/lib/module/components/RouteEventItemCompact.js

@@ -0,0 +1,171 @@
+"use strict";
+
+/**
+ * RouteEventItemCompact - Compact list item for route events
+ *
+ * Uses CompactRow pattern matching network/storage components
+ */
+
+import { useMemo } from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { CompactRow, formatRelativeTime, buoyColors } from "@buoy-gg/shared-ui";
+import { RouteEventExpandedContent } from "./RouteEventExpandedContent";
+
+// Route type for color coding
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Infer route template from pathname and segments
+function getRouteTemplate(pathname, segments) {
+  if (!segments || segments.length === 0) return null;
+  const templateParts = segments.map(segment => {
+    // Check if this segment appears to be a dynamic parameter
+    if (/^\d+$/.test(segment)) {
+      return "[id]";
+    }
+    if (/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(segment)) {
+      return "[id]";
+    }
+    return segment;
+  });
+  const template = "/" + templateParts.join("/");
+  return template !== pathname ? template : null;
+}
+
+// Get route type for color coding
+function getRouteType(event) {
+  if (event.pathname === "/") {
+    return "home";
+  }
+  if (getRouteTemplate(event.pathname, event.segments)) {
+    return "dynamic";
+  }
+  if (event.params && Object.keys(event.params).length > 0) {
+    return "with-params";
+  }
+  return "default";
+}
+
+// Get color for route type
+function getRouteTypeColor(routeType) {
+  switch (routeType) {
+    case "home":
+      return buoyColors.success;
+    // Teal
+    case "dynamic":
+      return buoyColors.primary;
+    // Teal
+    case "with-params":
+      return buoyColors.warning;
+    // Orange
+    default:
+      return buoyColors.border;
+    // Gray
+  }
+}
+
+// Get status label (route type name)
+function getStatusLabel(routeType) {
+  switch (routeType) {
+    case "home":
+      return "Home";
+    case "dynamic":
+      return "Dynamic";
+    case "with-params":
+      return "Params";
+    default:
+      return "Static";
+  }
+}
+
+// Get secondary text (param count + route type)
+function getSecondaryText(event, routeType) {
+  const hasParams = event.params && Object.keys(event.params).length > 0;
+  if (!hasParams) {
+    return undefined;
+  }
+  const paramCount = Object.keys(event.params).length;
+  const paramText = `${paramCount} param${paramCount !== 1 ? 's' : ''}`;
+  return `${paramText} • ${getStatusLabel(routeType)}`;
+}
+export function RouteEventItemCompact({
+  event,
+  visitNumber,
+  isExpanded,
+  onPress,
+  onNavigate
+}) {
+  const routeType = useMemo(() => getRouteType(event), [event]);
+  const routeTemplate = useMemo(() => getRouteTemplate(event.pathname, event.segments), [event.pathname, event.segments]);
+  const statusColor = useMemo(() => getRouteTypeColor(routeType), [routeType]);
+  const statusLabel = useMemo(() => getStatusLabel(routeType), [routeType]);
+  const secondaryText = useMemo(() => getSecondaryText(event, routeType), [event, routeType]);
+  const timeLabel = useMemo(() => formatRelativeTime(new Date(event.timestamp)), [event.timestamp]);
+  const expandedContent = useMemo(() => {
+    if (!isExpanded) return undefined;
+    return /*#__PURE__*/_jsx(RouteEventExpandedContent, {
+      event: event,
+      visitNumber: visitNumber,
+      routeTemplate: routeTemplate
+    });
+  }, [isExpanded, event, visitNumber, routeTemplate]);
+  const customBadge = useMemo(() => {
+    if (!onNavigate) {
+      return /*#__PURE__*/_jsx(Text, {
+        style: styles.timeText,
+        children: timeLabel
+      });
+    }
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.badgeContainer,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.timeText,
+        children: timeLabel
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.goButton,
+        onPress: e => {
+          e.stopPropagation();
+          onNavigate(event.pathname);
+        },
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.goButtonText,
+          children: "Go"
+        })
+      })]
+    });
+  }, [timeLabel, onNavigate, event.pathname]);
+  return /*#__PURE__*/_jsx(CompactRow, {
+    statusDotColor: statusColor,
+    statusLabel: statusLabel,
+    primaryText: event.pathname,
+    secondaryText: secondaryText,
+    customBadge: customBadge,
+    showChevron: true,
+    expandedContent: expandedContent,
+    isExpanded: isExpanded,
+    expandedGlowColor: statusColor,
+    onPress: onPress
+  });
+}
+const styles = StyleSheet.create({
+  badgeContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  timeText: {
+    fontSize: 10,
+    color: buoyColors.textMuted,
+    fontFamily: "monospace"
+  },
+  goButton: {
+    backgroundColor: buoyColors.primary,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 4
+  },
+  goButtonText: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: "#FFFFFF",
+    fontFamily: "monospace"
+  }
+});