fix system message, nick color in temp message

js/components/src/components/chat/chat-message.tsx

···
   pl,
   w,
 } from "../../lib/theme/atoms";
-import { atoms, layout } from "../ui";
+import { atoms, colors, layout } from "../ui";
 
 interface Facet {
   index: {
···
 import { Text } from "../ui/text";
 
 const getRgbColor = (color?: { red: number; green: number; blue: number }) =>
-  color ? `rgb(${color.red}, ${color.green}, ${color.blue})` : "$accentColor";
+  color ? `rgb(${color.red}, ${color.green}, ${color.blue})` : colors.gray[500];
 
 const segmentedObject = (
   obj: RichtextSegment,
···
         hour12: false,
       });
     }, []);
-
     return (
       <>
         {item.replyTo && showReply && (
···
               </Text>{" "}
               <Text
                 style={{
-                  color: atoms.colors.gray[300],
+                  color: colors.gray[300],
                   fontStyle: "italic",
                 }}
               >
···
             <Text
               style={{
                 fontVariant: ["tabular-nums"],
-                color: atoms.colors.gray[300],
+                color: colors.gray[400],
               }}
             >
               {formatTime(item.record.createdAt)}

js/components/src/components/chat/chat.tsx

···
-import { Reply, ShieldEllipsis } from "lucide-react-native";
+import { Ellipsis, Reply, ShieldEllipsis } from "lucide-react-native";
 import { ComponentProps, memo, useEffect, useRef, useState } from "react";
 import { FlatList, Platform, Pressable } from "react-native";
 import Swipeable, {
···
   Text,
   useChat,
   usePlayerStore,
-  usePointerDevice,
   useSetReplyToMessage,
   View,
 } from "../../";
···
   ({
     item,
     visible,
-    canModerate,
     hoverTimeoutRef,
   }: {
     item: ChatMessageViewHydrated;
     visible: boolean;
-    canModerate: boolean;
     hoverTimeoutRef: React.MutableRefObject<NodeJS.Timeout | null>;
   }) => {
     const setReply = useSetReplyToMessage();
···
         >
           <Reply color="white" size={16} />
         </Pressable>
-        {canModerate && (
-          <Pressable
-            onPress={() => setModMsg(item)}
-            style={[
-              {
-                padding: 6,
-                borderRadius: 4,
-                backgroundColor: "rgba(255, 255, 255, 0.1)",
-              },
-            ]}
-            onHoverIn={() => {
-              // Keep the actions bar visible when hovering over it
-              if (hoverTimeoutRef.current) {
-                clearTimeout(hoverTimeoutRef.current);
-                hoverTimeoutRef.current = null;
-              }
-            }}
-          >
-            <ShieldEllipsis color="white" size={16} />
-          </Pressable>
-        )}
+        <Pressable
+          onPress={() => setModMsg(item)}
+          style={[
+            {
+              padding: 6,
+              borderRadius: 4,
+              backgroundColor: "rgba(255, 255, 255, 0.1)",
+            },
+          ]}
+          onHoverIn={() => {
+            // Keep the actions bar visible when hovering over it
+            if (hoverTimeoutRef.current) {
+              clearTimeout(hoverTimeoutRef.current);
+              hoverTimeoutRef.current = null;
+            }
+          }}
+        >
+          <Ellipsis color="white" size={16} />
+        </Pressable>
       </View>
     );
   },
···
     const setReply = useSetReplyToMessage();
     const setModMsg = usePlayerStore((state) => state.setModMessage);
     const swipeableRef = useRef<SwipeableMethods | null>(null);
-    const { isMouseDriven } = usePointerDevice();
     const [isHovered, setIsHovered] = useState(false);
     const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
···
       };
     }, []);
 
-    // Check if this is a system message
-    const isSystemMessage = item.author.did === "did:sys:system";
-
-    // For system messages, render without swipe gestures
-    if (isSystemMessage) {
+    if (item.author.did === "did:sys:system") {
       return (
-        <View style={[py[1]]}>
-          <SystemMessage
-            title={item.record.text}
-            timestamp={new Date(item.record.createdAt)}
-          />
-        </View>
+        <SystemMessage
+          timestamp={new Date(item.record.createdAt)}
+          title={item.record.text}
+        />
       );
     }
 
-    if (isMouseDriven) {
+    if (Platform.OS === "web") {
       return (
         <View
           style={[
···
           onPointerEnter={handleHoverIn}
           onPointerLeave={handleHoverOut}
         >
-          <Pressable
-            onLongPress={canModerate ? () => setModMsg(item) : undefined}
-          >
+          <Pressable>
             <RenderChatMessage item={item} />
           </Pressable>
           <ActionsBar
             item={item}
             visible={isHovered}
-            canModerate={canModerate}
             hoverTimeoutRef={hoverTimeoutRef}
           />
         </View>
···
     }
 
     return (
-      <Pressable onLongPress={canModerate ? () => setModMsg(item) : undefined}>
+      <>
         <Swipeable
           containerStyle={[py[1]]}
           friction={2}
           enableTrackpadTwoFingerGesture
           rightThreshold={40}
+          leftThreshold={40}
           renderRightActions={
             Platform.OS === "android" ? undefined : RightAction
           }
···
             if (r === (Platform.OS === "android" ? "right" : "left")) {
               setReply(item);
             }
-            if (
-              r === (Platform.OS === "android" ? "left" : "right") &&
-              canModerate
-            ) {
+            if (r === (Platform.OS === "android" ? "left" : "right")) {
               setModMsg(item);
             }
             // close this swipeable
···
         >
           <RenderChatMessage item={item} />
         </Swipeable>
-      </Pressable>
+      </>
     );
   },
 );

js/components/src/components/chat/system-message.tsx

···
 import { View } from "react-native";
-import { flex, gap, layout, ml, p, pl, w } from "../../ui";
+import { flex, gap, layout, ml, pb, pl, px, w } from "../../ui";
 import { atoms } from "../ui";
 import { Code, Text } from "../ui/text";
 
···
 
 export function SystemMessage({ title, timestamp }: SystemMessageProps) {
   return (
-    <View style={[w.percent[100], p[2]]}>
+    <View style={[w.percent[100], px[2], pb[2]]}>
       <Code color="muted" tracking="widest" style={[pl[12], ml[1]]}>
         SYSTEM MESSAGE
       </Code>