hidden shit, and online status bars, search settings

src/app/components/presence/PresenceAvatar.tsx

@@ -1,35 +1,76 @@
-import React, { ReactNode } from 'react';
+import React, { CSSProperties, ReactElement, cloneElement, isValidElement } from 'react';
 import classNames from 'classnames';
-import * as css from './styles.css';
+import { config } from 'folds';
 import { Presence } from '../../hooks/useUserPresence';
 
 type PresenceAvatarProps = {
-  /** The presence state to display */
   presence?: Presence;
-  /** The avatar element to wrap */
-  children: ReactNode;
-  /** Additional className */
+  children: ReactElement;
   className?: string;
 };
 
+const PRESENCE_COLOR: Record<Presence, string> = {
+  [Presence.Online]: '#38842b',
+  [Presence.Unavailable]: '#959e30',
+  [Presence.Offline]: '#454545',
+};
+
+const rowStyle: CSSProperties = {
+  display: 'inline-flex',
+  flexDirection: 'row',
+  alignItems: 'stretch',
+  flexShrink: 0,
+  lineHeight: 0,
+};
+
+const faceStyle: CSSProperties = {
+  borderTopLeftRadius: 0,
+  borderBottomLeftRadius: 0,
+  // Keep the right side rounded to match size-200 nav avatars.
+  borderTopRightRadius: config.radii.R400,
+  borderBottomRightRadius: config.radii.R400,
+};
+
 /**
- * Wraps an avatar with a left-side presence indicator border.
- * Shows green for online, yellow/orange for unavailable/away, grey for offline.
+ * Presence strip as a real sibling (not ::before).
+ * Folds Avatar uses overflow:hidden, which clips outside ::before bars.
  */
-export function PresenceAvatar({ presence, children, className }: PresenceAvatarProps) {
-  if (!presence) {
-    return <>{children}</>;
-  }
+export function PresenceAvatar({
+  presence = Presence.Offline,
+  children,
+  className,
+}: PresenceAvatarProps) {
+  const stripColor = PRESENCE_COLOR[presence] ?? PRESENCE_COLOR[Presence.Offline];
+
+  const face = isValidElement(children)
+    ? cloneElement(children, {
+        className: classNames((children.props as { className?: string }).className),
+        style: {
+          ...((children.props as { style?: CSSProperties }).style ?? {}),
+          ...faceStyle,
+        },
+        // Avoid the folds radii shorthand fighting the square-left corners.
+        radii: '0',
+      } as Partial<unknown>)
+    : children;
 
   return (
-    <div
-      className={classNames(css.PresenceAvatarContainer, css.PresenceIndicator, className, {
-        [css.PresenceOnline]: presence === Presence.Online,
-        [css.PresenceUnavailable]: presence === Presence.Unavailable,
-        [css.PresenceOffline]: presence === Presence.Offline,
-      })}
-    >
-      {children}
+    <div className={className} style={rowStyle} data-presence={presence}>
+      <span
+        aria-hidden
+        style={{
+          display: 'block',
+          width: 4,
+          minWidth: 4,
+          flex: '0 0 4px',
+          alignSelf: 'stretch',
+          // Match folds Avatar size="200" so the strip can't collapse to 0 height.
+          minHeight: config.size.X200,
+          borderRadius: '5px 0 0 5px',
+          backgroundColor: stripColor,
+        }}
+      />
+      {face}
     </div>
   );
 }