From d9d54b3f74aecf4c57d31a1f2d80d9a29c8373ae Mon Sep 17 00:00:00 2001
From: Natalie Bridgers <natalie@stream.place>
Date: Thu, 2 Apr 2026 15:35:13 -0700
Subject: [PATCH] slight little redesign

---
 js/components/src/components/chat/badge.tsx   |  22 ++-
 .../src/components/chat/user-profile-card.tsx | 144 ++++++++++--------
 js/components/src/icons/icon-bsky.tsx         |  29 ++++
 3 files changed, 123 insertions(+), 72 deletions(-)
 create mode 100644 js/components/src/icons/icon-bsky.tsx

diff --git a/js/components/src/components/chat/badge.tsx b/js/components/src/components/chat/badge.tsx
index 3f501a28b..36bebce92 100644
--- a/js/components/src/components/chat/badge.tsx
+++ b/js/components/src/components/chat/badge.tsx
@@ -11,22 +11,28 @@ export const BADGE_IMAGES: Record<string, ReturnType<typeof require>> = {
 export const Badge = ({
   badgeType,
   size = 18,
+  isInChat = false,
 }: {
   badgeType: string;
   size?: number;
+  isInChat?: boolean;
 }) => {
   const source = BADGE_IMAGES[badgeType];
   if (!source) return null;
   return (
     <Image
       source={source}
-      style={{
-        height: size,
-        width: size,
-        marginBottom: Platform.OS === "web" ? -size : 0,
-        transform: Platform.OS === "web" ? [{ translateY: -size / 1.3 }] : [],
-        marginRight: 2,
-      }}
+      style={[
+        {
+          height: size,
+          width: size,
+          marginRight: 2,
+        },
+        isInChat && {
+          marginBottom: Platform.OS === "web" ? -size : 0,
+          transform: Platform.OS === "web" ? [{ translateY: -size / 1.3 }] : [],
+        },
+      ]}
     />
   );
 };
@@ -40,7 +46,7 @@ export const BadgeDisplayRow = ({
   return (
     <>
       {badges.map((badge, index) => (
-        <Badge key={index} badgeType={badge.badgeType} />
+        <Badge key={index} badgeType={badge.badgeType} isInChat />
       ))}
     </>
   );
diff --git a/js/components/src/components/chat/user-profile-card.tsx b/js/components/src/components/chat/user-profile-card.tsx
index 9fa4b3465..6174e3037 100644
--- a/js/components/src/components/chat/user-profile-card.tsx
+++ b/js/components/src/components/chat/user-profile-card.tsx
@@ -10,9 +10,11 @@ import {
   useRef,
   useState,
 } from "react";
-import { Platform, Pressable, View } from "react-native";
+import { Linking, Platform, Pressable, View } from "react-native";
 import { ChatMessageViewHydrated } from "streamplace";
+import { zero } from "../..";
 import { useAvatars } from "../../hooks/useAvatars";
+import IconBsky from "../../icons/icon-bsky";
 import {
   borders,
   gap,
@@ -29,6 +31,7 @@ import { useLivestreamStore } from "../../livestream-store";
 import { useUrl } from "../../streamplace-store";
 import { useTheme } from "../../ui";
 import { formatHandleWithAt } from "../../utils/format-handle";
+import { Button, MenuGroup } from "../ui";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -39,23 +42,21 @@ import { Badge } from "./badge";
 
 interface BadgeMeta {
   label: string;
-  description: string;
+  description?: string;
   issuedBy?: string;
 }
 
 const BADGE_META: Record<string, BadgeMeta> = {
   "place.stream.badge.defs#mod": {
     label: "Moderator",
-    description: "This user is a moderator.",
     issuedBy: "{issuer} for {streamer}",
   },
   "place.stream.badge.defs#streamer": {
     label: "Streamer",
-    description: "This user is the streamer.",
   },
   "place.stream.badge.defs#vip": {
     label: "VIP",
-    description: "This user is a very important person.",
+    description: "This user is clearly a very important person.",
   },
 };
 
@@ -70,13 +71,11 @@ interface OpenCardData {
 interface OpenCardContextValue {
   openCard: OpenCardData | null;
   setOpenCard: (card: OpenCardData | null) => void;
-  closeTimeoutRef: React.MutableRefObject<ReturnType<typeof setTimeout> | null>;
 }
 
 const OpenCardContext = createContext<OpenCardContextValue>({
   openCard: null,
   setOpenCard: () => {},
-  closeTimeoutRef: { current: null },
 });
 
 // All hook-derived data needed to render the card — computed outside any Modal boundary.
@@ -165,14 +164,16 @@ const BadgeRow = ({
       ]}
     >
       <Badge badgeType={badge.badgeType} size={32} />
-      <View style={[gap.all[1], { flex: 1 }]}>
+      <View style={[{ flex: 1 }]}>
         <Text size="xs">{meta.label}</Text>
         <Text size="xs" color="muted">
           Issued by {issuerLabel}
         </Text>
-        <Text size="xs" color="muted">
-          {meta.description}
-        </Text>
+        {meta.description && (
+          <Text size="xs" color="muted">
+            {meta.description}
+          </Text>
+        )}
       </View>
     </View>
   );
@@ -189,11 +190,11 @@ const ProfileCardContent = ({
     data;
 
   return (
-    <>
+    <View style={[zero.pb[1]]}>
       {profile?.banner ? (
         <Image
           source={{ uri: profile.banner }}
-          style={[h[20], { width: "100%" }]}
+          style={[h[20], { width: "100%" }, Platform.OS != "web" && zero.r.md]}
         />
       ) : (
         <View
@@ -206,7 +207,12 @@ const ProfileCardContent = ({
       <View
         style={[
           px[3],
-          { flexDirection: "row", alignItems: "flex-end", marginTop: -24 },
+          {
+            flexDirection: "row",
+            alignItems: "flex-end",
+            justifyContent: "space-between",
+            marginTop: -24,
+          },
         ]}
       >
         {profile?.avatar ? (
@@ -234,36 +240,69 @@ const ProfileCardContent = ({
           />
         )}
       </View>
-      <View style={[px[3], pb[3]]}>
-        <Text>@{author.handle}</Text>
-        {profile?.description ? (
-          <Text size="sm" color="muted" numberOfLines={4}>
-            {profile.description}
-          </Text>
-        ) : null}
-      </View>
-      {serviceBadges.length > 0 && serviceDid ? (
+      <View style={[px[3]]}>
         <View
           style={[
-            px[3],
-            pt[2],
-            pb[2],
-            borders.top.width.thin,
-            { borderTopColor: theme.colors.border },
+            zero.layout.flex.row,
+            zero.layout.flex.alignCenter,
+            zero.layout.flex.justify.between,
+            gap.all[2],
           ]}
         >
-          {serviceBadges.map((badge, i) => (
-            <BadgeRow
-              key={i}
-              badge={badge}
-              serviceDid={serviceDid}
-              streamer={streamer}
-              issuerProfiles={profiles}
-            />
-          ))}
+          <Text>@{author.handle}</Text>
+          {Platform.OS === "web" && (
+            <View style={{ position: "absolute", right: 2, bottom: 7 }}>
+              <Button
+                size="pill"
+                variant="secondary"
+                onPress={() => {
+                  Linking.openURL(`https://bsky.app/profile/${author.handle}`);
+                }}
+              >
+                <IconBsky size={20} />
+              </Button>
+            </View>
+          )}
         </View>
-      ) : null}
-    </>
+        {serviceBadges.length > 0 && serviceDid ? (
+          <View style={[zero.py[2]]}>
+            <MenuGroup>
+              {serviceBadges.map((badge, i) => (
+                <BadgeRow
+                  key={i}
+                  badge={badge}
+                  serviceDid={serviceDid}
+                  streamer={streamer}
+                  issuerProfiles={profiles}
+                />
+              ))}
+            </MenuGroup>
+          </View>
+        ) : null}
+      </View>
+      {Platform.OS !== "web" && (
+        <View style={[px[3], pt[2]]}>
+          <Button
+            variant="secondary"
+            size="sm"
+            onPress={() => {
+              Linking.openURL(`https://bsky.app/profile/${author.handle}`);
+            }}
+          >
+            <View
+              style={[
+                zero.gap.all[2],
+                zero.layout.flex.row,
+                zero.layout.flex.alignCenter,
+              ]}
+            >
+              <IconBsky size={20} />
+              <Text>View Profile</Text>
+            </View>
+          </Button>
+        </View>
+      )}
+    </View>
   );
 };
 
@@ -271,26 +310,13 @@ const ProfileCardContent = ({
 const ProfileCardOverlay = ({
   card,
   onClose,
-  closeTimeoutRef,
 }: {
   card: OpenCardData;
   onClose: () => void;
-  closeTimeoutRef: React.MutableRefObject<ReturnType<typeof setTimeout> | null>;
 }) => {
   const { theme } = useTheme();
   const data = useProfileCardData(card.author, card.badges);
 
-  const cancelClose = useCallback(() => {
-    if (closeTimeoutRef.current) {
-      clearTimeout(closeTimeoutRef.current);
-      closeTimeoutRef.current = null;
-    }
-  }, [closeTimeoutRef]);
-
-  const scheduleClose = useCallback(() => {
-    closeTimeoutRef.current = setTimeout(onClose, 150);
-  }, [closeTimeoutRef, onClose]);
-
   const [portalContainer, setPortalContainer] = useState<Element | null>(null);
   useEffect(() => {
     if (typeof document !== "undefined") {
@@ -330,8 +356,6 @@ const ProfileCardOverlay = ({
         }}
       />
       <Pressable
-        onHoverIn={cancelClose}
-        onHoverOut={scheduleClose}
         style={[
           r.md,
           borders.width.thin,
@@ -361,20 +385,12 @@ export const ProfileCardProvider = ({
   children: React.ReactNode;
 }) => {
   const [openCard, setOpenCard] = useState<OpenCardData | null>(null);
-  const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const value = useMemo(
-    () => ({ openCard, setOpenCard, closeTimeoutRef }),
-    [openCard],
-  );
+  const value = useMemo(() => ({ openCard, setOpenCard }), [openCard]);
   return (
     <OpenCardContext.Provider value={value}>
       {children}
       {openCard && Platform.OS === "web" && (
-        <ProfileCardOverlay
-          card={openCard}
-          onClose={() => setOpenCard(null)}
-          closeTimeoutRef={closeTimeoutRef}
-        />
+        <ProfileCardOverlay card={openCard} onClose={() => setOpenCard(null)} />
       )}
     </OpenCardContext.Provider>
   );
diff --git a/js/components/src/icons/icon-bsky.tsx b/js/components/src/icons/icon-bsky.tsx
new file mode 100644
index 000000000..de507f655
--- /dev/null
+++ b/js/components/src/icons/icon-bsky.tsx
@@ -0,0 +1,29 @@
+import Svg from "react-native-svg";
+
+import { G, Path, SvgProps } from "react-native-svg";
+
+export interface IconBskyProps extends SvgProps {
+  size?: number;
+  color?: string;
+}
+
+export const IconBsky = ({
+  size = 24,
+  color = "#0F73FF",
+  style,
+  ...props
+}: IconBskyProps) => (
+  <Svg
+    fill="none"
+    viewBox="0 0 64 57"
+    width={size}
+    style={{ aspectRatio: 64 / 57, height: size }}
+    {...props}
+  >
+    <G strokeLinecap="round" fillRule="evenodd" stroke={color} fill={color}>
+      <Path d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z" />
+    </G>
+  </Svg>
+);
+
+export default IconBsky;
-- 
2.51.2