@polderlabs/bizar 3.23.1 → 4.2.0

package/bizar-dash/src/web/mobile/MobileTopbar.tsx

@@ -0,0 +1,115 @@
+// src/mobile/MobileTopbar.tsx — compact top bar with search, notifications, project selector.
+import { useState } from 'react';
+import { ChevronDown } from 'lucide-react';
+import type { Snapshot } from '../lib/types';
+import { api } from '../lib/api';
+import { MobileNotifications } from './views/MobileNotifications';
+import { MobileBottomSheet } from './components/MobileBottomSheet';
+
+type Props = {
+  activeTab: string;
+  snapshot: Snapshot | null;
+  onSearch: () => void;
+  onNavigate: (type: string, id: string, meta?: Record<string, unknown> | null) => void;
+};
+
+const TAB_LABELS: Record<string, string> = {
+  activity: 'Activity',
+  chat: 'Chat',
+  tasks: 'Tasks',
+  settings: 'Settings',
+  more: 'More',
+  plans: 'Plans',
+  agents: 'Agents',
+  skills: 'Skills',
+  mods: 'Mods',
+  schedules: 'Schedules',
+  history: 'History',
+  config: 'Config',
+  'plan-detail': 'Plan',
+  'agent-detail': 'Agent',
+  'task-detail': 'Task',
+};
+
+export function MobileTopbar({ activeTab, snapshot, onSearch, onNavigate }: Props) {
+  const [projectSheetOpen, setProjectSheetOpen] = useState(false);
+
+  const handleProjectSelect = async (projectId: string) => {
+    try {
+      await api.post(`/projects/${encodeURIComponent(projectId)}/activate`);
+      setProjectSheetOpen(false);
+      // Force reload by navigating to activity
+      window.location.reload();
+    } catch {
+      // best-effort
+    }
+  };
+
+  return (
+    <header className="mobile-topbar">
+      <div className="mobile-topbar-left">
+        <span className="mobile-logo">ᛒ</span>
+        {snapshot?.activeProject && (
+          <button
+            type="button"
+            className="mobile-project-btn"
+            onClick={() => setProjectSheetOpen(true)}
+            aria-label="Select project"
+          >
+            <span className="mobile-project-name">{snapshot.activeProject.name}</span>
+            <ChevronDown size={14} />
+          </button>
+        )}
+        <span className="mobile-title">{TAB_LABELS[activeTab] || 'Bizar'}</span>
+      </div>
+
+      <div className="mobile-topbar-right">
+        <button
+          type="button"
+          className="mobile-icon-btn"
+          onClick={onSearch}
+          aria-label="Search"
+        >
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <circle cx="11" cy="11" r="8" />
+            <path d="m21 21-4.35-4.35" />
+          </svg>
+        </button>
+
+        <MobileNotifications
+          onSelect={(notification) => {
+            onNavigate('notification', notification.link || '', notification.meta ?? null);
+          }}
+        />
+
+        {snapshot?.activeProject && (
+          <MobileBottomSheet
+            open={projectSheetOpen}
+            onClose={() => setProjectSheetOpen(false)}
+            title="Projects"
+          >
+            <div className="mobile-project-list">
+              {(snapshot.projects || []).map((p) => (
+                <button
+                  key={p.id}
+                  type="button"
+                  className={`mobile-project-item ${p.id === snapshot.activeProject?.id ? 'active' : ''}`}
+                  onClick={() => handleProjectSelect(p.id)}
+                >
+                  <div className="mobile-project-status" data-status={p.status} />
+                  <div className="mobile-project-info">
+                    <span className="mobile-project-item-name">{p.name}</span>
+                    <span className="mobile-project-item-path">{p.path}</span>
+                  </div>
+                  {p.id === snapshot.activeProject?.id && (
+                    <span className="mobile-active-badge">active</span>
+                  )}
+                </button>
+              ))}
+            </div>
+          </MobileBottomSheet>
+        )}
+      </div>
+    </header>
+  );
+}

package/bizar-dash/src/web/mobile/components/MobileBottomSheet.tsx

@@ -0,0 +1,182 @@
+// src/mobile/components/MobileBottomSheet.tsx — slide-up bottom sheet for mobile.
+import { useEffect, useId, useRef, type PointerEvent as ReactPointerEvent } from 'react';
+import { X } from 'lucide-react';
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  title?: string;
+  children: React.ReactNode;
+  actions?: React.ReactNode;
+  maxHeight?: string;
+};
+
+export function MobileBottomSheet({ open, onClose, title, children, actions, maxHeight = '85vh' }: Props) {
+  const sheetRef = useRef<HTMLDivElement>(null);
+  const closeButtonRef = useRef<HTMLButtonElement>(null);
+  const titleId = useId();
+  const lastActiveRef = useRef<HTMLElement | null>(null);
+  const dragStartYRef = useRef<number | null>(null);
+  const dragDeltaRef = useRef(0);
+  const scrollLockYRef = useRef(0);
+
+  const getFocusable = () => {
+    return sheetRef.current?.querySelectorAll<HTMLElement>(
+      'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+    ) ?? [];
+  };
+
+  // Close on ESC
+  useEffect(() => {
+    if (!open) return;
+    lastActiveRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+      if (e.key !== 'Tab') return;
+
+      const focusable = Array.from(getFocusable());
+      if (focusable.length === 0) {
+        e.preventDefault();
+        sheetRef.current?.focus();
+        return;
+      }
+
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const active = document.activeElement as HTMLElement | null;
+
+      if (e.shiftKey) {
+        if (!active || active === first || active === sheetRef.current) {
+          e.preventDefault();
+          last?.focus();
+        }
+        return;
+      }
+
+      if (active === last) {
+        e.preventDefault();
+        first?.focus();
+      }
+    };
+
+    window.addEventListener('keydown', onKey);
+    requestAnimationFrame(() => {
+      closeButtonRef.current?.focus() ?? sheetRef.current?.focus();
+    });
+
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      lastActiveRef.current?.focus();
+    };
+  }, [open, onClose]);
+
+  // Prevent body scroll when open
+  useEffect(() => {
+    if (open) {
+      scrollLockYRef.current = window.scrollY;
+      document.documentElement.style.overflow = 'hidden';
+      document.body.style.overflow = 'hidden';
+      document.body.style.position = 'fixed';
+      document.body.style.top = `-${scrollLockYRef.current}px`;
+      document.body.style.left = '0';
+      document.body.style.right = '0';
+      document.body.style.width = '100%';
+    } else {
+      document.documentElement.style.overflow = '';
+      document.body.style.overflow = '';
+      document.body.style.position = '';
+      document.body.style.top = '';
+      document.body.style.left = '';
+      document.body.style.right = '';
+      document.body.style.width = '';
+    }
+    return () => {
+      document.documentElement.style.overflow = '';
+      document.body.style.overflow = '';
+      document.body.style.position = '';
+      document.body.style.top = '';
+      document.body.style.left = '';
+      document.body.style.right = '';
+      document.body.style.width = '';
+      window.scrollTo(0, scrollLockYRef.current);
+    };
+  }, [open]);
+
+  if (!open) return null;
+
+  const onPointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {
+    if (!e.isPrimary) return;
+    dragStartYRef.current = e.clientY;
+    dragDeltaRef.current = 0;
+    sheetRef.current?.setPointerCapture(e.pointerId);
+  };
+
+  const onPointerMove = (e: ReactPointerEvent<HTMLDivElement>) => {
+    if (dragStartYRef.current == null || !sheetRef.current) return;
+    const delta = Math.max(0, e.clientY - dragStartYRef.current);
+    dragDeltaRef.current = delta;
+    sheetRef.current.style.transform = `translateY(${delta}px)`;
+  };
+
+  const endDrag = (e?: ReactPointerEvent<HTMLDivElement>) => {
+    if (!sheetRef.current) return;
+    if (e && sheetRef.current.hasPointerCapture(e.pointerId)) {
+      sheetRef.current.releasePointerCapture(e.pointerId);
+    }
+    const delta = dragDeltaRef.current;
+    sheetRef.current.style.transform = '';
+    dragStartYRef.current = null;
+    dragDeltaRef.current = 0;
+    if (delta > 72) onClose();
+  };
+
+  return (
+    <div className="mobile-sheet-overlay" onClick={onClose}>
+      <div
+        ref={sheetRef}
+        className="mobile-sheet"
+        style={{ maxHeight }}
+        onClick={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-modal
+        aria-label={title ? undefined : 'Sheet'}
+        aria-labelledby={title ? titleId : undefined}
+        tabIndex={-1}
+      >
+        {/* Drag handle */}
+        <div
+          className="mobile-sheet-handle"
+          onPointerDown={onPointerDown}
+          onPointerMove={onPointerMove}
+          onPointerUp={endDrag}
+          onPointerCancel={endDrag}
+          aria-hidden="true"
+        />
+
+        <div className="mobile-sheet-header">
+          {title ? <h3 id={titleId} className="mobile-sheet-title">{title}</h3> : <div />}
+          <button
+            ref={closeButtonRef}
+            type="button"
+            className="mobile-icon-btn"
+            onClick={onClose}
+            aria-label="Close"
+          >
+            <X size={18} />
+          </button>
+        </div>
+
+        <div className="mobile-sheet-content">
+          {children}
+        </div>
+
+        {actions && (
+          <div className="mobile-sheet-actions">
+            {actions}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/bizar-dash/src/web/mobile/components/MobileListItem.tsx

@@ -0,0 +1,64 @@
+// src/mobile/components/MobileListItem.tsx — reusable list row for mobile.
+import { type ComponentType } from 'react';
+import { cn } from '../../lib/utils';
+
+type Props = {
+  icon?: ComponentType<{ size?: number }>;
+  title: string;
+  meta?: string;
+  badge?: string | React.ReactNode;
+  badgeVariant?: 'default' | 'success' | 'warning' | 'error' | 'accent';
+  onClick?: () => void;
+  arrow?: boolean;
+  className?: string;
+  status?: string;
+};
+
+export function MobileListItem({
+  icon: Icon,
+  title,
+  meta,
+  badge,
+  badgeVariant = 'default',
+  onClick,
+  arrow,
+  className,
+  status,
+}: Props) {
+  const Tag = onClick ? 'button' : 'div';
+
+  return (
+    <Tag
+      {...(onClick ? { type: 'button' as const } : {})}
+      className={cn('mobile-list-item', onClick && 'mobile-list-item-interactive', className)}
+      onClick={onClick}
+    >
+      {Icon && (
+        <div className="mobile-list-icon">
+          <Icon size={16} />
+        </div>
+      )}
+      {status && (
+        <div className="mobile-list-status-dot" data-status={status} />
+      )}
+      <div className="mobile-list-content">
+        <span className="mobile-list-title">{title}</span>
+        {meta && <span className="mobile-list-meta">{meta}</span>}
+      </div>
+      {badge && (
+        <span className={cn('mobile-list-badge', badgeVariant !== 'default' && `badge-${badgeVariant}`)}>
+          {badge}
+        </span>
+      )}
+      {arrow && <ChevronRight size={14} style={{ color: 'var(--text-dim)', flexShrink: 0 }} />}
+    </Tag>
+  );
+}
+
+function ChevronRight({ size, style }: { size: number; style?: React.CSSProperties }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={style}>
+      <polyline points="9 18 15 12 9 6" />
+    </svg>
+  );
+}

package/bizar-dash/src/web/mobile/components/MobileModal.tsx

@@ -0,0 +1,123 @@
+// src/mobile/components/MobileModal.tsx — full-screen mobile modal.
+import { useEffect, useId, useRef } from 'react';
+import { X } from 'lucide-react';
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  title?: string;
+  children: React.ReactNode;
+  actions?: React.ReactNode;
+};
+
+export function MobileModal({ open, onClose, title, children, actions }: Props) {
+  const modalRef = useRef<HTMLDivElement>(null);
+  const closeButtonRef = useRef<HTMLButtonElement>(null);
+  const lastActiveRef = useRef<HTMLElement | null>(null);
+  const titleId = useId();
+  const scrollLockYRef = useRef(0);
+
+  useEffect(() => {
+    if (!open) return;
+
+    lastActiveRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+
+    const focusableSelector = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+      if (e.key !== 'Tab') return;
+
+      const focusable = Array.from(modalRef.current?.querySelectorAll<HTMLElement>(focusableSelector) ?? []);
+      if (focusable.length === 0) {
+        e.preventDefault();
+        modalRef.current?.focus();
+        return;
+      }
+
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const active = document.activeElement as HTMLElement | null;
+
+      if (e.shiftKey) {
+        if (!active || active === first || active === modalRef.current) {
+          e.preventDefault();
+          last?.focus();
+        }
+        return;
+      }
+
+      if (active === last) {
+        e.preventDefault();
+        first?.focus();
+      }
+    };
+
+    window.addEventListener('keydown', onKey);
+    scrollLockYRef.current = window.scrollY;
+    document.documentElement.style.overflow = 'hidden';
+    document.body.style.overflow = 'hidden';
+    document.body.style.position = 'fixed';
+    document.body.style.top = `-${scrollLockYRef.current}px`;
+    document.body.style.left = '0';
+    document.body.style.right = '0';
+    document.body.style.width = '100%';
+    requestAnimationFrame(() => {
+      closeButtonRef.current?.focus() ?? modalRef.current?.focus();
+    });
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      document.documentElement.style.overflow = '';
+      document.body.style.overflow = '';
+      document.body.style.position = '';
+      document.body.style.top = '';
+      document.body.style.left = '';
+      document.body.style.right = '';
+      document.body.style.width = '';
+      window.scrollTo(0, scrollLockYRef.current);
+      lastActiveRef.current?.focus();
+    };
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="mobile-modal-overlay"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div
+        ref={modalRef}
+        className="mobile-modal"
+        onClick={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-modal
+        aria-label={title ? undefined : 'Modal'}
+        aria-labelledby={title ? titleId : undefined}
+        tabIndex={-1}
+      >
+        <div className="mobile-modal-header">
+          {title ? <h2 id={titleId} className="mobile-modal-title">{title}</h2> : <div />}
+          <button
+            ref={closeButtonRef}
+            type="button"
+            className="mobile-icon-btn"
+            onClick={onClose}
+            aria-label="Close"
+          >
+            <X size={20} />
+          </button>
+        </div>
+        <div className="mobile-modal-content">
+          {children}
+        </div>
+        {actions && (
+          <div className="mobile-modal-actions">
+            {actions}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}