Added landing page videos (#43)

Author: nedtwigg

lib/src/components/HeaderActionButton.tsx

@@ -5,7 +5,7 @@ import { PopupButtonRow, renderShortcuts } from './design';
 export interface HeaderActionButtonProps {
   className: string;
   ariaLabel: string;
-  tooltip?: string;
+  tooltip?: string | null;
   tooltipDetail?: string;
   tooltipAlign?: 'left' | 'right';
   onMouseDownCapture?: (e: React.MouseEvent<HTMLButtonElement>) => void;
@@ -32,7 +32,7 @@ export function HeaderActionButton({
   const buttonRef = useRef<HTMLButtonElement>(null);
   const [isVisible, setIsVisible] = useState(false);
   const [tooltipStyle, setTooltipStyle] = useState<React.CSSProperties | null>(null);
-  const tooltipPrimary = tooltip ?? ariaLabel;
+  const tooltipPrimary = tooltip === null ? null : (tooltip ?? ariaLabel);
 
   useEffect(() => {
     if (!isVisible || !buttonRef.current) return;
@@ -73,6 +73,7 @@ export function HeaderActionButton({
         }}
         onClick={(e) => {
           e.stopPropagation();
+          setIsVisible(false);
           onClick(e);
         }}
         onContextMenu={onContextMenu ? (e) => {
@@ -89,7 +90,7 @@ export function HeaderActionButton({
         {children}
       </button>
     </div>
-    {isVisible && tooltipStyle && createPortal(
+    {isVisible && tooltipStyle && tooltipPrimary && createPortal(
       <PopupButtonRow
         role="tooltip"
         className="pointer-events-none z-[9999] whitespace-nowrap px-2 py-1.5"

lib/src/components/TerminalPane.tsx

@@ -9,6 +9,7 @@ import {
 } from '../lib/terminal-registry';
 import { SelectionOverlay } from './SelectionOverlay';
 import { SelectionPopup } from './SelectionPopup';
+import { MouseOverrideBanner } from './wall/MouseOverrideBanner';
 import { TERMINAL_BOTTOM_RADIUS_CLASS } from './design';
 
 interface TerminalPaneProps {
@@ -54,6 +55,7 @@ export function TerminalPane({ id, isFocused = true }: TerminalPaneProps) {
     <div ref={containerRef} className={`relative h-full w-full overflow-hidden bg-terminal-bg ${TERMINAL_BOTTOM_RADIUS_CLASS}`}>
       <SelectionOverlay terminalId={id} />
       <SelectionPopup terminalId={id} />
+      <MouseOverrideBanner terminalId={id} />
     </div>
   );
 }

lib/src/components/wall/MouseOverrideBanner.tsx

@@ -1,65 +1,46 @@
-import { useEffect, useLayoutEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
+import { useEffect, useState, useSyncExternalStore } from 'react';
 import { PopupButtonRow, popupButton } from '../design';
-import { clampOverlayPosition } from '../../lib/ui-geometry';
+import {
+  DEFAULT_MOUSE_SELECTION_STATE,
+  getMouseSelectionSnapshot,
+  setOverride as setMouseOverride,
+  subscribeToMouseSelection,
+} from '../../lib/mouse-selection';
 
-export function MouseOverrideBanner({
-  anchor,
-  onMakePermanent,
-  onCancel,
-}: {
-  anchor: HTMLElement;
-  onMakePermanent: () => void;
-  onCancel: () => void;
-}) {
-  const [pos, setPos] = useState<{ x: number; y: number } | null>(null);
+export function MouseOverrideBanner({ terminalId }: { terminalId: string }) {
+  const states = useSyncExternalStore(subscribeToMouseSelection, getMouseSelectionSnapshot);
+  const state = states.get(terminalId) ?? DEFAULT_MOUSE_SELECTION_STATE;
+  const visible = state.override === 'temporary';
   const [flashed, setFlashed] = useState<'sticky' | 'cancel' | null>(null);
 
-  useLayoutEffect(() => {
-    const update = () => {
-      const r = anchor.getBoundingClientRect();
-      setPos({ x: r.left, y: r.bottom + 4 });
-    };
-    update();
-    window.addEventListener('scroll', update, true);
-    window.addEventListener('resize', update);
-    return () => {
-      window.removeEventListener('scroll', update, true);
-      window.removeEventListener('resize', update);
-    };
-  }, [anchor]);
-
   useEffect(() => {
     if (!flashed) return;
     const id = window.setTimeout(() => {
-      if (flashed === 'sticky') onMakePermanent();
-      else onCancel();
+      setMouseOverride(terminalId, flashed === 'sticky' ? 'permanent' : 'off');
+      setFlashed(null);
     }, 260);
     return () => window.clearTimeout(id);
-  }, [flashed, onMakePermanent, onCancel]);
+  }, [flashed, terminalId]);
 
-  if (!pos) return null;
+  if (!visible) return null;
 
-  return createPortal(
+  return (
     <PopupButtonRow
-      className="z-[9999]"
-      style={clampOverlayPosition({ left: pos.x, top: pos.y, width: 340, height: 32 })}
+      className="absolute right-1 top-1 z-20 whitespace-nowrap"
       onMouseDown={(e) => e.stopPropagation()}
       role="status"
     >
-      <span className="px-1.5 py-0.5">Temporary mouse override until mouse-up.</span>
+      <span className="px-1.5 py-0.5 text-muted">Temporary mouse override until mouse-up.</span>
       <button
         type="button"
-        className={popupButton({ tone: 'muted', flashed: flashed === 'sticky' })}
+        className={popupButton({ flashed: flashed === 'sticky' })}
         onClick={() => !flashed && setFlashed('sticky')}
       >Make sticky</button>
       <button
         type="button"
-        className={popupButton({ tone: 'muted', flashed: flashed === 'cancel' })}
+        className={popupButton({ flashed: flashed === 'cancel' })}
         onClick={() => !flashed && setFlashed('cancel')}
       >Cancel</button>
-    </PopupButtonRow>,
-    document.body,
+    </PopupButtonRow>
   );
 }
-

lib/src/components/wall/TerminalPaneHeader.tsx

@@ -40,7 +40,6 @@ import {
   WindowFocusedContext,
   ZoomedContext,
 } from './wall-context';
-import { MouseOverrideBanner } from './MouseOverrideBanner';
 
 const tabVariant = tv({
   base: `flex h-full w-full cursor-grab items-center gap-1.5 ${TERMINAL_TOP_RADIUS_CLASS} pl-2 pr-[5px] text-sm leading-none font-mono select-none active:cursor-grabbing`,
@@ -68,15 +67,16 @@ export function TerminalPaneHeader({ api }: IDockviewPanelHeaderProps) {
   const mouseState = mouseStates.get(api.id) ?? DEFAULT_MOUSE_SELECTION_STATE;
   const showMouseIcon = mouseState.mouseReporting !== 'none';
   const inOverride = mouseState.override !== 'off';
-  const mouseIconTooltip = inOverride
+  const mouseIconTooltip: string | null = mouseState.override === 'permanent'
     ? "You're overriding the TUI's mouse capture. Click to restore."
-    : 'TUI is intercepting mouse commands. Click to override.';
+    : mouseState.override === 'temporary'
+      ? null
+      : 'TUI is intercepting mouse commands. Click to override.';
   const mouseIconAriaLabel = inOverride ? 'Restore mouse capture' : 'Override mouse capture';
   const isSelected = selectedId === api.id;
   const isActiveHeader = mode === 'passthrough' && isSelected && windowFocused;
   const isRenaming = renamingId === api.id;
   const tabRef = useRef<HTMLDivElement>(null);
-  const [mouseIconAnchor, setMouseIconAnchor] = useState<HTMLDivElement | null>(null);
   const suppressAlertClickRef = useRef(false);
   const [tier, setTier] = useState<HeaderTier>('full');
   const [dialogTriggerRect, setDialogTriggerRect] = useState<DOMRect | null>(null);
@@ -210,7 +210,7 @@ export function TerminalPaneHeader({ api }: IDockviewPanelHeaderProps) {
       {!isRenaming && (
         <>
           {showMouseIcon && (
-            <div ref={setMouseIconAnchor} className="ml-1 shrink-0">
+            <div className="ml-1 shrink-0">
               <HeaderActionButton
                 className="flex h-5 min-w-5 items-center justify-center rounded transition-colors shrink-0 hover:bg-current/10"
                 onMouseDown={(e) => e.stopPropagation()}
@@ -231,13 +231,6 @@ export function TerminalPaneHeader({ api }: IDockviewPanelHeaderProps) {
               </HeaderActionButton>
             </div>
           )}
-          {mouseIconAnchor && mouseState.override === 'temporary' && (
-            <MouseOverrideBanner
-              anchor={mouseIconAnchor}
-              onMakePermanent={() => setMouseOverride(api.id, 'permanent')}
-              onCancel={() => setMouseOverride(api.id, 'off')}
-            />
-          )}
           {tier === 'full' && (
             <div className="ml-1 flex shrink-0 items-center gap-0.5">
               <HeaderActionButton

lib/src/stories/MouseHeaderIcon.stories.tsx

@@ -9,6 +9,7 @@ import {
   type WallMode,
   type WallActions,
 } from '../components/Wall';
+import { MouseOverrideBanner } from '../components/wall/MouseOverrideBanner';
 import {
   setMouseReporting,
   setOverride,
@@ -69,6 +70,9 @@ function MouseIconStoryFrame({
                   tabLocation={'header' as Parameters<typeof TerminalPaneHeader>[0]['tabLocation']}
                 />
               </div>
+              <div className="relative" style={{ height: 40 }}>
+                <MouseOverrideBanner terminalId={SESSION_ID} />
+              </div>
             </div>
           </RenamingIdContext.Provider>
         </WallActionsContext.Provider>
@@ -99,7 +103,7 @@ export const ReportingOn: Story = {
 };
 
 export const TemporaryOverride: Story = {
-  args: { mouseReporting: 'vt200', override: 'temporary' },
+  args: { mouseReporting: 'vt200', override: 'temporary', width: 500 },
 };
 
 export const PermanentOverride: Story = {