hidden shit, and online status bars, search settings

src/app/components/presence/styles.css.ts

@@ -1,5 +1,5 @@
 import { style } from '@vanilla-extract/css';
-import { config, color } from 'folds';
+import { config } from 'folds';
 
 export const AvatarPresence = style({
   display: 'flex',
@@ -21,40 +21,67 @@ export const AvatarPresenceBadge = style({
   overflow: 'hidden',
 });
 
-export const PresenceAvatarContainer = style({
-  display: 'flex',
+/**
+ * DM list avatar with flush left presence strip — same approach as message timeline.
+ * Square left corners; ::before is the colored strip with outer radius.
+ */
+export const PresenceAvatarFace = style({
   position: 'relative',
   flexShrink: 0,
-  alignSelf: 'flex-start',
+  // Room for the strip so overflow clipping / parent padding doesn't hide it.
+  marginLeft: '4px',
+  overflow: 'visible',
+  borderTopLeftRadius: '0 !important',
+  borderBottomLeftRadius: '0 !important',
   '::before': {
     content: '""',
     position: 'absolute',
-    left: 0,
-    top: '10%',
-    height: '80%',
-    width: '3px',
-    borderTopRightRadius: '2px',
-    borderBottomRightRadius: '2px',
+    left: '-4px',
+    top: 0,
+    height: '100%',
+    width: '4px',
+    borderTopLeftRadius: '5px',
+    borderBottomLeftRadius: '5px',
     zIndex: 1,
+    backgroundColor: '#454545',
+  },
+  selectors: {
+    '& > *': {
+      borderTopLeftRadius: '0 !important',
+      borderBottomLeftRadius: '0 !important',
+    },
   },
 });
 
-export const PresenceIndicator = style({});
-
 export const PresenceOnline = style({
-  '::before': {
-    backgroundColor: color.Success.Main,
+  selectors: {
+    '&::before': {
+      backgroundColor: '#38842b',
+    },
   },
 });
 
 export const PresenceUnavailable = style({
-  '::before': {
-    backgroundColor: color.Warning.Main,
+  selectors: {
+    '&::before': {
+      backgroundColor: '#959e30',
+    },
   },
 });
 
 export const PresenceOffline = style({
-  '::before': {
-    backgroundColor: color.Secondary.Main,
+  selectors: {
+    '&::before': {
+      backgroundColor: '#454545',
+    },
   },
 });
+
+/** @deprecated aliases kept for older imports */
+export const PresenceAvatarContainer = PresenceAvatarFace;
+export const PresenceAvatarRow = PresenceAvatarFace;
+export const PresenceStrip = style({});
+export const PresenceStripOnline = PresenceOnline;
+export const PresenceStripUnavailable = PresenceUnavailable;
+export const PresenceStripOffline = PresenceOffline;
+export const PresenceIndicator = style({});