Module cleanup and tests

styles/components/_roster-strip.less

@@ -18,7 +18,27 @@
 // ============================================================
 // ScryingPoolStrip Layout
 // ============================================================
+// Outer Foundry Application window (has .scrying-pool-strip via defaultOptions.classes).
+// Only visual appearance — sizing is controlled by JS setPosition().
+// WARNING: do NOT add max-width or overflow here; the outer window also carries this class
+// and would clip the expanded inner content.
 .scrying-pool-strip {
+  background: var(--sp-bg, hsl(220, 15%, 12%));
+  border-radius: 8px;
+
+  // Hide Foundry's default window header — replaced by a lightweight in-content button.
+  header.window-header { display: none; }
+
+  // Remove window-content padding so the strip fills the frame edge-to-edge.
+  .window-content {
+    padding: 0;
+    overflow: hidden;
+  }
+}
+
+// Inner template div (has BOTH .scrying-pool AND .scrying-pool-strip).
+// Controls the expand/collapse behaviour; safe to use max-width + overflow here.
+.scrying-pool.scrying-pool-strip {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -26,17 +46,72 @@
   max-width: 44px;
   overflow: hidden;
   transition: max-width 200ms ease-in-out;
-  background: var(--sp-bg, hsl(220, 15%, 12%));
-  border-radius: 8px;
 
   &.is-expanded {
     max-width: 240px;
   }
 }
 
+// ── Drag grip (top bar, replaces window header drag affordance) ────────────────
+.sp-strip__grip {
+  width: 100%;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+  color: var(--sp-text, hsl(0, 0%, 80%));
+  opacity: 0.35;
+  font-size: 10px;
+  flex-shrink: 0;
+  transition: opacity 0.15s;
+  user-select: none;
+
+  &:hover  { opacity: 0.75; }
+  &:active { cursor: grabbing; opacity: 1; }
+}
+
+// ── Lightweight close button (replaces window header) ─────────────────────────
+.sp-strip__close-btn {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  z-index: 10;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  line-height: 18px;
+  font-size: 13px;
+  font-weight: 400;
+  background: transparent;
+  color: var(--sp-text, hsl(0, 0%, 80%));
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  opacity: 0.45;
+  transition: opacity 0.15s, background 0.15s;
+
+  &:hover {
+    opacity: 1;
+    background: rgba(255, 255, 255, 0.1);
+  }
+  &:active { opacity: 0.75; }
+}
+
+// ── Toolbar row: toggle + Director's Board on the same line ───────────────────
+.sp-strip__toolbar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  flex-shrink: 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
 .sp-strip__toggle {
   width: 44px;
-  height: 44px;
+  min-width: 44px;
+  height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -44,7 +119,39 @@
   border: none;
   cursor: pointer;
   color: var(--sp-text, hsl(0, 0%, 80%));
+  font-size: 11px;
   flex-shrink: 0;
+  opacity: 0.6;
+
+  &:hover { opacity: 1; }
+}
+
+// ── Director's Board CTA button (shown when sidebar injection not available) ──
+.sp-strip__directors-board-cta {
+  flex: 1;
+  min-width: 0;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 8px;
+  background: none;
+  border: none;
+  border-left: 1px solid rgba(255, 255, 255, 0.06);
+  cursor: pointer;
+  color: var(--sp-text-secondary, #7a8390);
+  font-size: 11px;
+  text-align: left;
+  transition: background 0.15s, color 0.15s;
+  flex-shrink: 0;
+
+  i    { font-size: 12px; flex-shrink: 0; }
+  span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.06);
+    color: var(--sp-text-primary, #dde2e8);
+  }
 }
 
 .sp-strip__participants {
@@ -89,7 +196,59 @@
 
   .is-expanded & {
     width: 100%;
-    padding: 6px 8px;
+    height: 135px; // 16:9 at 240 px strip width
+    padding: 0;
+    align-items: flex-end;
+    background: hsl(220, 15%, 14%);
+
+    // Gradient scrim so name text is legible over any video
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 48px;
+      background: linear-gradient(transparent, hsla(0, 0%, 0%, 0.72));
+      z-index: 2;
+      pointer-events: none;
+      border-radius: 0 0 4px 4px;
+    }
+
+    .sp-avatar__img {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      z-index: 1;
+      width: 48px;
+      height: 48px;
+    }
+
+    .sp-avatar__name {
+      position: absolute;
+      bottom: 20px;
+      left: 8px;
+      right: 8px;
+      z-index: 3;
+      color: hsl(0, 0%, 95%);
+    }
+
+    .sp-avatar__state-label {
+      position: absolute;
+      bottom: 6px;
+      left: 8px;
+      z-index: 3;
+      color: hsla(0, 0%, 85%, 0.85);
+    }
+
+    .sp-avatar__corner-badge {
+      bottom: 6px;
+      right: 6px;
+      z-index: 4;
+      width: 10px;
+      height: 10px;
+    }
   }
 }