clawport-ui 0.1.0

package/components/MobileSidebar.tsx

@@ -0,0 +1,251 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { usePathname } from 'next/navigation';
+import { Menu, X } from 'lucide-react';
+import { NavLinks } from '@/components/NavLinks';
+import { ThemeToggle } from '@/components/ThemeToggle';
+import { SearchTrigger } from '@/components/GlobalSearch';
+import { useSettings } from '@/app/settings-provider';
+
+export function MobileSidebar({
+  onOpenSearch,
+}: {
+  onOpenSearch?: () => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const pathname = usePathname();
+  const { settings } = useSettings();
+
+  // Close sidebar on route change
+  useEffect(() => {
+    setOpen(false);
+  }, [pathname]);
+
+  // Close on ESC
+  useEffect(() => {
+    if (!open) return;
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape') setOpen(false);
+    }
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [open]);
+
+  // Prevent body scroll when open
+  useEffect(() => {
+    if (open) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [open]);
+
+  const toggle = useCallback(() => setOpen((prev) => !prev), []);
+
+  const handleSearchClick = useCallback(() => {
+    setOpen(false);
+    onOpenSearch?.();
+  }, [onOpenSearch]);
+
+  return (
+    <>
+      {/* Mobile header bar */}
+      <header
+        className="flex md:hidden items-center"
+        style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          zIndex: 60,
+          height: '48px',
+          gap: '12px',
+          padding: '0 12px',
+          background: 'var(--sidebar-bg)',
+          backdropFilter: 'blur(40px) saturate(180%)',
+          WebkitBackdropFilter: 'blur(40px) saturate(180%)',
+          borderBottom: '1px solid var(--separator)',
+        }}
+      >
+        {/* Hamburger / close toggle */}
+        <button
+          onClick={toggle}
+          className="btn-ghost focus-ring"
+          aria-label={open ? 'Close navigation menu' : 'Open navigation menu'}
+          aria-expanded={open}
+          style={{
+            width: '36px',
+            height: '36px',
+            borderRadius: '8px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: 'transparent',
+            border: 'none',
+            cursor: 'pointer',
+            color: 'var(--text-secondary)',
+            transition: 'color 100ms var(--ease-smooth)',
+          }}
+        >
+          {open ? <X size={20} /> : <Menu size={20} />}
+        </button>
+
+        {/* App title */}
+        <div className="flex items-center gap-2" style={{ flex: 1 }}>
+          {settings.portalIcon ? (
+            <img
+              src={settings.portalIcon}
+              alt=""
+              style={{
+                width: '24px',
+                height: '24px',
+                borderRadius: '6px',
+                objectFit: 'cover',
+                flexShrink: 0,
+              }}
+            />
+          ) : (
+            <span
+              style={{
+                width: '24px',
+                height: '24px',
+                borderRadius: '6px',
+                background: settings.accentColor
+                  ? `linear-gradient(135deg, ${settings.accentColor}, ${settings.accentColor}dd)`
+                  : 'linear-gradient(135deg, #f5c518, #e8b800)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: '13px',
+                flexShrink: 0,
+              }}
+            >
+              {settings.portalEmoji ?? '\ud83e\udd9e'}
+            </span>
+          )}
+          <span
+            style={{
+              fontSize: '15px',
+              fontWeight: 600,
+              color: 'var(--text-primary)',
+              letterSpacing: '-0.2px',
+            }}
+          >
+            {settings.portalName ?? 'ClawPort'} {settings.portalSubtitle ?? 'Command Centre'}
+          </span>
+        </div>
+      </header>
+
+      {/* Backdrop */}
+      <div
+        className="block md:hidden"
+        style={{
+          position: 'fixed',
+          inset: 0,
+          zIndex: 50,
+          background: 'rgba(0,0,0,0.5)',
+          backdropFilter: 'blur(2px)',
+          WebkitBackdropFilter: 'blur(2px)',
+          opacity: open ? 1 : 0,
+          pointerEvents: open ? 'auto' : 'none',
+          transition: 'opacity 200ms var(--ease-smooth)',
+        }}
+        onClick={() => setOpen(false)}
+        aria-hidden="true"
+      />
+
+      {/* Slide-out sidebar panel */}
+      <aside
+        className="flex md:hidden flex-col"
+        style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          bottom: 0,
+          zIndex: 55,
+          width: '280px',
+          background: 'var(--sidebar-bg)',
+          backdropFilter: 'var(--sidebar-backdrop)',
+          WebkitBackdropFilter: 'var(--sidebar-backdrop)',
+          borderRight: '1px solid var(--separator)',
+          transform: open ? 'translateX(0)' : 'translateX(-100%)',
+          transition: 'transform 300ms cubic-bezier(0.32, 0.72, 0, 1)',
+          boxShadow: open ? 'var(--shadow-overlay)' : 'none',
+        }}
+        aria-hidden={!open}
+      >
+        {/* App icon + title */}
+        <div className="px-4 pt-5 pb-3">
+          <div className="flex items-center gap-3">
+            {settings.portalIcon ? (
+              <img
+                src={settings.portalIcon}
+                alt=""
+                style={{
+                  width: '36px',
+                  height: '36px',
+                  borderRadius: '10px',
+                  objectFit: 'cover',
+                  boxShadow: 'var(--shadow-card)',
+                  flexShrink: 0,
+                }}
+              />
+            ) : (
+              <div
+                style={{
+                  width: '36px',
+                  height: '36px',
+                  borderRadius: '10px',
+                  background: settings.accentColor
+                    ? `linear-gradient(135deg, ${settings.accentColor}, ${settings.accentColor}dd)`
+                    : 'linear-gradient(135deg, #f5c518, #e8b800)',
+                  boxShadow: 'var(--shadow-card)',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontSize: '18px',
+                  flexShrink: 0,
+                }}
+              >
+                {settings.portalEmoji ?? '\ud83e\udd9e'}
+              </div>
+            )}
+            <div>
+              <div
+                style={{
+                  fontSize: '17px',
+                  fontWeight: 600,
+                  letterSpacing: '-0.3px',
+                  color: 'var(--text-primary)',
+                }}
+              >
+                {settings.portalName ?? 'ClawPort'}
+              </div>
+              <div
+                style={{
+                  fontSize: '12px',
+                  color: 'var(--text-secondary)',
+                  letterSpacing: '0.01em',
+                }}
+              >
+                {settings.portalSubtitle ?? 'Command Centre'}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Search trigger */}
+        <div className="px-3 pb-2">
+          <SearchTrigger onClick={handleSearchClick} />
+        </div>
+
+        <NavLinks />
+        <ThemeToggle />
+      </aside>
+    </>
+  );
+}

package/components/NavLinks.tsx

@@ -0,0 +1,271 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { Map, MessageSquare, Clock, Brain, Columns3, BookOpen, Settings } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
+import type { CronJob } from '@/lib/types';
+import { useSettings } from '@/app/settings-provider';
+
+function getInitials(name: string | null): string {
+  if (!name) return '??'
+  const parts = name.trim().split(/\s+/)
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase()
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()
+}
+
+// ---------------------------------------------------------------------------
+// Nav item definition
+// ---------------------------------------------------------------------------
+
+interface NavItem {
+  href: string;
+  label: string;
+  icon: LucideIcon;
+  badge?: 'agents' | 'unread' | 'errors';
+}
+
+const NAV_ITEMS: NavItem[] = [
+  { href: '/', label: 'Map', icon: Map, badge: 'agents' },
+  { href: '/kanban', label: 'Kanban', icon: Columns3 },
+  { href: '/chat', label: 'Messages', icon: MessageSquare, badge: 'unread' },
+  { href: '/crons', label: 'Crons', icon: Clock, badge: 'errors' },
+  { href: '/memory', label: 'Memory', icon: Brain },
+  { href: '/docs', label: 'Docs', icon: BookOpen },
+  { href: '/settings', label: 'Settings', icon: Settings },
+];
+
+// ---------------------------------------------------------------------------
+// NavLinks component
+// ---------------------------------------------------------------------------
+
+export function NavLinks() {
+  const pathname = usePathname();
+  const { settings } = useSettings();
+  const [agentCount, setAgentCount] = useState<number | null>(null);
+  const [cronCount, setCronCount] = useState<number | null>(null);
+  const [cronErrorCount, setCronErrorCount] = useState<number | null>(null);
+
+  // Fetch agent count
+  useEffect(() => {
+    fetch('/api/agents')
+      .then((r) => {
+        if (!r.ok) throw new Error(`HTTP ${r.status}`);
+        return r.json();
+      })
+      .then((data: unknown) => {
+        if (Array.isArray(data)) {
+          setAgentCount(data.length);
+        }
+      })
+      .catch(() => {
+        setAgentCount(null);
+      });
+  }, []);
+
+  // Fetch cron error count
+  useEffect(() => {
+    fetch('/api/crons')
+      .then((r) => {
+        if (!r.ok) throw new Error(`HTTP ${r.status}`);
+        return r.json();
+      })
+      .then((data: unknown) => {
+        if (Array.isArray(data)) {
+          const crons = data as CronJob[];
+          setCronCount(crons.length);
+          setCronErrorCount(crons.filter((c) => c.status === 'error').length);
+        }
+      })
+      .catch(() => {
+        setCronErrorCount(null);
+      });
+  }, []);
+
+  // Resolve badge content per nav item
+  function getBadge(item: NavItem): React.ReactNode {
+    if (item.badge === 'agents' && agentCount !== null) {
+      return (
+        <span
+          className="nav-badge"
+          style={{
+            marginLeft: 'auto',
+            fontSize: '10px',
+            fontFamily: 'var(--font-mono)',
+            padding: '1px 6px',
+            borderRadius: 'var(--radius-sm)',
+            background: 'var(--fill-quaternary)',
+            color: 'var(--text-tertiary)',
+            lineHeight: '16px',
+          }}
+        >
+          {agentCount}
+        </span>
+      );
+    }
+    if (item.badge === 'errors' && cronCount !== null) {
+      const hasErrors = cronErrorCount !== null && cronErrorCount > 0;
+      return (
+        <span
+          style={{
+            marginLeft: 'auto',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '6px',
+          }}
+        >
+          <span
+            className="nav-badge"
+            style={{
+              fontSize: '10px',
+              fontFamily: 'var(--font-mono)',
+              padding: '1px 6px',
+              borderRadius: 'var(--radius-sm)',
+              background: hasErrors ? 'rgba(255,69,58,0.1)' : 'var(--fill-quaternary)',
+              color: hasErrors ? 'var(--system-red)' : 'var(--text-tertiary)',
+              lineHeight: '16px',
+              fontWeight: hasErrors ? 600 : undefined,
+            }}
+          >
+            {hasErrors ? `${cronErrorCount} err` : cronCount}
+          </span>
+          {hasErrors && (
+            <span
+              aria-label={`${cronErrorCount} cron error${cronErrorCount > 1 ? 's' : ''}`}
+              style={{
+                width: '6px',
+                height: '6px',
+                borderRadius: '50%',
+                background: 'var(--system-red)',
+                flexShrink: 0,
+                animation: 'pulse-red 1.5s ease-in-out infinite',
+              }}
+            />
+          )}
+        </span>
+      );
+    }
+    return null;
+  }
+
+  return (
+    <nav className="flex-1 flex flex-col" aria-label="Main navigation">
+      <div className="px-3 pt-2 pb-3">
+        {/* Section header */}
+        <div
+          style={{
+            fontSize: '11px',
+            fontWeight: 600,
+            letterSpacing: '0.06em',
+            color: 'var(--text-tertiary)',
+            textTransform: 'uppercase',
+            padding: '0 8px',
+            marginBottom: '4px',
+          }}
+        >
+          Workspace
+        </div>
+
+        <div className="flex flex-col gap-0.5">
+          {NAV_ITEMS.map((item) => {
+            const isActive =
+              item.href === '/'
+                ? pathname === '/'
+                : pathname.startsWith(item.href);
+
+            const Icon = item.icon;
+
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={`nav-item focus-ring ${isActive ? 'nav-item-active' : ''}`}
+                aria-label={item.label}
+                aria-current={isActive ? 'page' : undefined}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '10px',
+                  minHeight: '44px',
+                  padding: '0 10px 0 12px',
+                  borderRadius: '8px',
+                  fontSize: '13px',
+                  fontWeight: isActive ? 600 : 500,
+                  color: isActive ? 'var(--accent)' : 'var(--text-secondary)',
+                  background: isActive ? 'var(--accent-fill)' : 'transparent',
+                  textDecoration: 'none',
+                  transition: 'all 100ms var(--ease-smooth)',
+                }}
+              >
+                <Icon
+                  size={18}
+                  style={{
+                    flexShrink: 0,
+                    color: isActive ? 'var(--accent)' : 'var(--text-tertiary)',
+                    transition: 'color 100ms var(--ease-smooth)',
+                  }}
+                />
+                <span style={{ flex: 1 }}>{item.label}</span>
+                {getBadge(item)}
+              </Link>
+            );
+          })}
+        </div>
+      </div>
+
+      <div className="flex-1" />
+
+      {/* User footer */}
+      <div
+        style={{
+          borderTop: '1px solid var(--separator)',
+          padding: '10px 16px',
+        }}
+      >
+        <div className="flex items-center gap-2.5">
+          <div
+            style={{
+              width: '28px',
+              height: '28px',
+              borderRadius: '7px',
+              background: 'var(--accent-fill)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontSize: '11px',
+              fontWeight: 700,
+              color: 'var(--accent)',
+              flexShrink: 0,
+              letterSpacing: '-0.02em',
+            }}
+          >
+            {getInitials(settings.operatorName)}
+          </div>
+          <div style={{ minWidth: 0 }}>
+            <div
+              style={{
+                fontSize: '13px',
+                fontWeight: 500,
+                color: 'var(--text-primary)',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {settings.operatorName ?? 'Operator'}
+            </div>
+            <div
+              style={{
+                fontSize: '11px',
+                color: 'var(--text-tertiary)',
+              }}
+            >
+              Owner
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}