@polderlabs/bizar 7.0.4 → 8.0.0

package/bizar-dash/src/web/components/InviteDialog.tsx

@@ -1,205 +0,0 @@
-// src/web/components/InviteDialog.tsx — v5.0.0 — modal to create and manage workspace invites.
-import { useState, useEffect } from 'react';
-import { Copy, Check, Trash2, Mail, Link2 } from 'lucide-react';
-import { useModal } from './Modal';
-import { Button } from './Button';
-import { api } from '../lib/api';
-import { cn } from '../lib/utils';
-
-export type InviteInfo = {
-  token: string;
-  email: string;
-  role: 'admin' | 'editor' | 'viewer';
-  invitedBy: string;
-  expiresAt: string;
-};
-
-type Props = {
-  workspaceId: string;
-  onInviteCreated?: () => void;
-};
-
-export function InviteDialog({ workspaceId, onInviteCreated }: Props) {
-  const modal = useModal();
-  const [email, setEmail] = useState('');
-  const [role, setRole] = useState<'admin' | 'editor' | 'viewer'>('editor');
-  const [invites, setInvites] = useState<InviteInfo[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [creating, setCreating] = useState(false);
-  const [copied, setCopied] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    loadInvites();
-  }, [workspaceId]);
-
-  async function loadInvites() {
-    setLoading(true);
-    try {
-      const r = await api.get<{ invites: InviteInfo[] }>(`/workspaces/${workspaceId}/invites`);
-      setInvites(r.invites || []);
-    } catch {
-      // Ignore load errors
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  async function handleCreate(e: React.FormEvent) {
-    e.preventDefault();
-    if (!email.trim()) return;
-    setCreating(true);
-    setError(null);
-    try {
-      const result = await api.post<{ token: string; url: string }>(`/workspaces/${workspaceId}/invites`, {
-        email: email.trim(),
-        role,
-      });
-      setEmail('');
-      await loadInvites();
-      onInviteCreated?.();
-
-      // Show the invite URL in a copy dialog
-      modal.open({
-        title: 'Invite Link Created',
-        children: (
-          <div className="invite-link-dialog">
-            <p>Share this link with <strong>{email}</strong> to invite them as <strong>{role}</strong>:</p>
-            <div className="invite-url-box">
-              <Link2 size={14} />
-              <input
-                type="text"
-                readOnly
-                value={result.url}
-                onClick={(e) => (e.target as HTMLInputElement).select()}
-              />
-              <button
-                type="button"
-                className="invite-copy-btn"
-                onClick={() => {
-                  navigator.clipboard.writeText(result.url).catch(() => undefined);
-                  setCopied(result.token);
-                  setTimeout(() => setCopied(null), 2000);
-                }}
-              >
-                {copied === result.token ? <Check size={14} /> : <Copy size={14} />}
-              </button>
-            </div>
-            <p className="invite-url-note">This link expires in 7 days.</p>
-          </div>
-        ),
-        footer: (
-          <Button variant="primary" size="sm" onClick={() => modal.close()}>
-            Done
-          </Button>
-        ),
-      });
-    } catch (err: unknown) {
-      setError((err as Error).message || 'Failed to create invite');
-    } finally {
-      setCreating(false);
-    }
-  }
-
-  async function handleRevoke(token: string) {
-    if (!confirm('Revoke this invite?')) return;
-    try {
-      await api.del(`/workspaces/${workspaceId}/invites/${token}`);
-      await loadInvites();
-    } catch (err: unknown) {
-      setError((err as Error).message || 'Failed to revoke invite');
-    }
-  }
-
-  function copyToClipboard(text: string, key: string) {
-    navigator.clipboard.writeText(text).catch(() => undefined);
-    setCopied(key);
-    setTimeout(() => setCopied(null), 2000);
-  }
-
-  const roleColors: Record<string, string> = {
-    admin: 'role-admin',
-    editor: 'role-editor',
-    viewer: 'role-viewer',
-  };
-
-  return (
-    <div className="invite-dialog">
-      <form className="invite-form" onSubmit={handleCreate}>
-        <div className="invite-form-row">
-          <div className="invite-form-field">
-            <label htmlFor="invite-email">Email address</label>
-            <input
-              id="invite-email"
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="colleague@example.com"
-              required
-            />
-          </div>
-          <div className="invite-form-field invite-form-field-role">
-            <label htmlFor="invite-role">Role</label>
-            <select
-              id="invite-role"
-              value={role}
-              onChange={(e) => setRole(e.target.value as 'admin' | 'editor' | 'viewer')}
-            >
-              <option value="viewer">Viewer</option>
-              <option value="editor">Editor</option>
-              <option value="admin">Admin</option>
-            </select>
-          </div>
-          <Button
-            type="submit"
-            variant="primary"
-            size="sm"
-            loading={creating}
-            disabled={!email.trim()}
-          >
-            <Mail size={13} />
-            Invite
-          </Button>
-        </div>
-        {error && <p className="invite-error">{error}</p>}
-      </form>
-
-      <div className="invite-list">
-        <h4 className="invite-list-title">Pending Invites</h4>
-        {loading && <p className="invite-loading">Loading...</p>}
-        {!loading && invites.length === 0 && (
-          <p className="invite-empty">No pending invites</p>
-        )}
-        {invites.map((inv) => (
-          <div key={inv.token} className="invite-item">
-            <div className="invite-item-info">
-              <span className="invite-item-email">{inv.email}</span>
-              <span className={cn('invite-item-role', roleColors[inv.role])}>{inv.role}</span>
-            </div>
-            <div className="invite-item-actions">
-              <button
-                type="button"
-                className="invite-action-btn"
-                title="Copy invite link"
-                onClick={() => {
-                  const url = `${window.location.origin}/accept-invite?token=${inv.token}`;
-                  copyToClipboard(url, inv.token);
-                }}
-              >
-                {copied === inv.token ? <Check size={13} /> : <Copy size={13} />}
-              </button>
-              <button
-                type="button"
-                className="invite-action-btn invite-action-revoke"
-                title="Revoke invite"
-                onClick={() => handleRevoke(inv.token)}
-              >
-                <Trash2 size={13} />
-              </button>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

package/bizar-dash/src/web/components/KillConfirmDialog.tsx

@@ -1,88 +0,0 @@
-// src/components/KillConfirmDialog.tsx — confirmation dialog for killing bg instances.
-// Provides both a JSX component and a convenience `openKillConfirmDialog` function.
-
-import { Button } from './Button';
-import type { ModalApi } from './Modal';
-
-export type KillConfirmDialogProps = {
-  instanceId: string;
-  instanceName?: string;
-  onConfirm: () => void | Promise<void>;
-  onClose: () => void;
-};
-
-/**
- * Render inline inside a modal body. Usage:
- *
- *   modal.open({
- *     title: 'Kill background instance?',
- *     children: (
- *       <KillConfirmDialog
- *         instanceId="bgr_abc"
- *         onConfirm={async () => { await killIt(); modal.close(); }}
- *         onClose={() => modal.close()}
- *       />
- *     ),
- *   });
- */
-export function KillConfirmDialog({ instanceId, instanceName, onConfirm, onClose }: KillConfirmDialogProps) {
-  return (
-    <div>
-      <p style={{ marginBottom: 16, lineHeight: 1.6 }}>
-        Instance <code>{instanceId}</code>
-        {instanceName ? <> ({instanceName})</> : null} will be terminated.
-        This cannot be undone.
-      </p>
-      <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
-        <Button variant="ghost" onClick={onClose}>Cancel</Button>
-        <Button
-          variant="danger"
-          onClick={async () => {
-            await onConfirm();
-            onClose();
-          }}
-        >
-          Kill
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-/**
- * Convenience wrapper: open a kill-confirmation modal programmatically.
- * Calls `DELETE /api/background/${instanceId}` on confirm and shows a toast.
- */
-export function openKillConfirmDialog(
-  modal: ModalApi,
-  toast: { success: (msg: string, duration?: number) => void; error: (msg: string) => void },
-  instanceId: string,
-  instanceName?: string,
-  onSuccess?: () => void,
-) {
-  modal.open({
-    title: `Kill instance?`,
-    width: 400,
-    children: (
-      <KillConfirmDialog
-        instanceId={instanceId}
-        instanceName={instanceName}
-        onConfirm={async () => {
-          try {
-            const r = await fetch(`/api/background/${encodeURIComponent(instanceId)}`, { method: 'DELETE' });
-            const data = await r.json();
-            if (data.ok) {
-              toast.success(`Instance ${instanceId} killed.`);
-              onSuccess?.();
-            } else {
-              toast.error(`Kill failed: ${data.error || 'unknown error'}`);
-            }
-          } catch (err) {
-            toast.error(`Kill failed: ${(err as Error).message}`);
-          }
-        }}
-        onClose={() => modal.close()}
-      />
-    ),
-  });
-}

package/bizar-dash/src/web/components/MobileBottomNav.tsx

@@ -1,38 +0,0 @@
-// src/web/components/MobileBottomNav.tsx — iOS/Android-style bottom tab bar.
-import type { LucideIcon } from 'lucide-react';
-import { cn } from '../lib/utils';
-
-export type MobileTab = {
-  id: string;
-  label: string;
-  icon: LucideIcon;
-};
-
-type Props = {
-  tabs: MobileTab[];
-  activeTab: string;
-  onTabChange: (id: string) => void;
-};
-
-export function MobileBottomNav({ tabs, activeTab, onTabChange }: Props) {
-  return (
-    <nav className="mobile-bottom-nav" role="tablist" aria-label="Primary navigation">
-      {tabs.map((t) => {
-        const Icon = t.icon;
-        return (
-          <button
-            key={t.id}
-            role="tab"
-            aria-selected={activeTab === t.id}
-            className={cn('mobile-nav-item', activeTab === t.id && 'is-active')}
-            onClick={() => onTabChange(t.id)}
-            type="button"
-          >
-            <Icon size={20} />
-            <span className="mobile-nav-label">{t.label}</span>
-          </button>
-        );
-      })}
-    </nav>
-  );
-}

package/bizar-dash/src/web/components/MobileDrawer.tsx

@@ -1,68 +0,0 @@
-// src/web/components/MobileDrawer.tsx — slide-in drawer for secondary navigation.
-import { X } from 'lucide-react';
-import type { LucideIcon } from 'lucide-react';
-import { cn } from '../lib/utils';
-
-export type DrawerTab = {
-  id: string;
-  label: string;
-  icon: LucideIcon;
-};
-
-type Props = {
-  open: boolean;
-  onClose: () => void;
-  tabs: DrawerTab[];
-  activeTab: string;
-  onTabChange: (id: string) => void;
-};
-
-export function MobileDrawer({ open, onClose, tabs, activeTab, onTabChange }: Props) {
-  return (
-    <>
-      {open && (
-        <div
-          className="mobile-drawer-overlay"
-          onClick={onClose}
-          aria-hidden="true"
-        />
-      )}
-      <aside
-        className={cn('mobile-drawer', open && 'is-open')}
-        role="dialog"
-        aria-modal="true"
-        aria-label="All views"
-      >
-        <div className="mobile-drawer-head">
-          <h2>All Views</h2>
-          <button
-            onClick={onClose}
-            aria-label="Close menu"
-            type="button"
-            className="mobile-drawer-close"
-          >
-            <X size={20} />
-          </button>
-        </div>
-        <div className="mobile-drawer-grid">
-          {tabs.map((t) => {
-            const Icon = t.icon;
-            return (
-              <button
-                key={t.id}
-                role="tab"
-                aria-selected={activeTab === t.id}
-                className={cn('mobile-drawer-item', activeTab === t.id && 'is-active')}
-                onClick={() => onTabChange(t.id)}
-                type="button"
-              >
-                <Icon size={22} />
-                <span>{t.label}</span>
-              </button>
-            );
-          })}
-        </div>
-      </aside>
-    </>
-  );
-}

package/bizar-dash/src/web/components/MobileHeader.tsx

@@ -1,50 +0,0 @@
-// src/web/components/MobileHeader.tsx — sticky top bar with menu, title, and actions.
-import { Menu, Search, X } from 'lucide-react';
-import { cn } from '../lib/utils';
-
-type Props = {
-  onMenuClick: () => void;
-  scrolled: boolean;
-  activeTab: string;
-  onSettings?: (() => void) | null;
-  onSearch?: () => void;
-};
-
-export function MobileHeader({ onMenuClick, scrolled, activeTab, onSettings, onSearch }: Props) {
-  return (
-    <header className={cn('mobile-header', scrolled && 'is-scrolled')}>
-      <button
-        onClick={onMenuClick}
-        className="mobile-menu-btn"
-        aria-label="Open menu"
-        type="button"
-      >
-        <Menu size={20} />
-      </button>
-
-      <h1 className="mobile-header-title">
-        {activeTab === 'settings' ? 'Settings' : 'Bizar'}
-      </h1>
-
-      {onSettings ? (
-        <button
-          onClick={onSettings}
-          className="mobile-settings-exit"
-          aria-label="Exit settings"
-          type="button"
-        >
-          <X size={20} />
-        </button>
-      ) : (
-        <button
-          onClick={onSearch}
-          className="mobile-search-btn"
-          aria-label="Search"
-          type="button"
-        >
-          <Search size={20} />
-        </button>
-      )}
-    </header>
-  );
-}

package/bizar-dash/src/web/components/MobileLayout.tsx

@@ -1,63 +0,0 @@
-// src/web/components/MobileLayout.tsx — main mobile shell: header + drawer + content + bottom nav.
-import { useState } from 'react';
-import { MobileHeader } from './MobileHeader';
-import { MobileDrawer, type DrawerTab } from './MobileDrawer';
-import { MobileBottomNav, type MobileTab } from './MobileBottomNav';
-
-// Re-export DrawerTab so consumers only need to import from MobileLayout.
-export { type DrawerTab } from './MobileDrawer';
-
-type Props = {
-  children: React.ReactNode;
-  activeTab: string;
-  onTabChange: (id: string) => void;
-  tabs: MobileTab[];
-  fullTabs: DrawerTab[];
-  onExitSettings?: () => void;
-  onSearch?: () => void;
-};
-
-export function MobileLayout({
-  children,
-  activeTab,
-  onTabChange,
-  tabs,
-  fullTabs,
-  onExitSettings,
-  onSearch,
-}: Props) {
-  const [drawerOpen, setDrawerOpen] = useState(false);
-  const [scrolled, setScrolled] = useState(false);
-
-  return (
-    <div className="mobile-layout">
-      <MobileHeader
-        onMenuClick={() => setDrawerOpen(true)}
-        scrolled={scrolled}
-        activeTab={activeTab}
-        onSettings={activeTab === 'settings' ? onExitSettings : null}
-        onSearch={onSearch}
-      />
-
-      <MobileDrawer
-        open={drawerOpen}
-        onClose={() => setDrawerOpen(false)}
-        tabs={fullTabs}
-        activeTab={activeTab}
-        onTabChange={(id) => {
-          onTabChange(id);
-          setDrawerOpen(false);
-        }}
-      />
-
-      <main
-        className="mobile-content"
-        onScroll={(e) => setScrolled(e.currentTarget.scrollTop > 10)}
-      >
-        {children}
-      </main>
-
-      <MobileBottomNav tabs={tabs} activeTab={activeTab} onTabChange={onTabChange} />
-    </div>
-  );
-}