@mndrk/agx 2.0.0-next.8 → 2.0.0

package/cloud-runtime/standalone/Projects/Agents/agx-cloud/components/Notifications/NotificationsPanel.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { BellOff, Loader2 } from "lucide-react";
+import type { Notification } from "@/hooks/useNotifications";
+import { NotificationItem } from "./NotificationItem";
+
+interface NotificationsPanelProps {
+  notifications: Notification[];
+  loading: boolean;
+  error: string | null;
+  hasMore: boolean;
+  onMarkRead: (id: string) => void;
+  onLoadMore: () => void;
+  onClose: () => void;
+}
+
+export function NotificationsPanel({
+  notifications,
+  loading,
+  error,
+  hasMore,
+  onMarkRead,
+  onLoadMore,
+  onClose,
+}: NotificationsPanelProps) {
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  // Close on outside click
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [onClose]);
+
+  // Close on Escape
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [onClose]);
+
+  // Focus first item on open
+  useEffect(() => {
+    const firstItem = panelRef.current?.querySelector<HTMLElement>("[role=listitem]");
+    firstItem?.focus();
+  }, []);
+
+  return (
+    <div
+      ref={panelRef}
+      role="dialog"
+      aria-label="Notifications"
+      aria-modal="false"
+      className={[
+        "absolute right-0 top-full mt-2 w-80 sm:w-96",
+        "bg-[var(--card-bg)] border border-[var(--card-border)] rounded-xl shadow-lg z-50",
+        "flex flex-col overflow-hidden",
+        "max-h-[480px]",
+      ].join(" ")}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-[var(--card-border)]">
+        <h2 className="text-sm font-semibold text-[var(--foreground)]">Notifications</h2>
+      </div>
+
+      {/* Body */}
+      <div className="flex-1 overflow-y-auto">
+        {loading && notifications.length === 0 ? (
+          // Loading skeleton
+          <div className="p-4 space-y-3" aria-label="Loading notifications">
+            {[1, 2, 3].map((i) => (
+              <div key={i} className="flex gap-3 animate-pulse">
+                <div className="w-4 h-4 rounded-full bg-[var(--muted)] mt-0.5 flex-shrink-0" />
+                <div className="flex-1 space-y-1.5">
+                  <div className="h-3 bg-[var(--muted)] rounded w-3/4" />
+                  <div className="h-3 bg-[var(--muted)] rounded w-1/2" />
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : error ? (
+          <div className="flex flex-col items-center justify-center py-10 text-center px-4">
+            <p className="text-sm text-[var(--destructive)]">{error}</p>
+          </div>
+        ) : notifications.length === 0 ? (
+          // Empty state
+          <div
+            className="flex flex-col items-center justify-center py-12 text-center px-4"
+            aria-label="No notifications"
+          >
+            <BellOff className="w-8 h-8 text-[var(--muted-foreground)] mb-3" aria-hidden="true" />
+            <p className="text-sm font-medium text-[var(--foreground)]">All caught up</p>
+            <p className="text-xs text-[var(--muted-foreground)] mt-1">No notifications yet.</p>
+          </div>
+        ) : (
+          <ul role="list" aria-label="Notification list" className="divide-y divide-[var(--card-border)]">
+            {notifications.map((n) => (
+              <NotificationItem key={n.id} notification={n} onMarkRead={onMarkRead} />
+            ))}
+          </ul>
+        )}
+
+        {/* Load more */}
+        {hasMore && !loading && (
+          <button
+            onClick={onLoadMore}
+            className="w-full py-2 text-xs text-[var(--primary)] hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]"
+          >
+            Load more
+          </button>
+        )}
+        {loading && notifications.length > 0 && (
+          <div className="flex justify-center py-3">
+            <Loader2 className="w-4 h-4 animate-spin text-[var(--muted-foreground)]" />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/cloud-runtime/standalone/Projects/Agents/agx-cloud/components/Notifications/index.ts

@@ -0,0 +1,3 @@
+export { NotificationBell } from "./NotificationBell";
+export { NotificationsPanel } from "./NotificationsPanel";
+export { NotificationItem } from "./NotificationItem";

package/cloud-runtime/standalone/Projects/Agents/agx-cloud/components/WorkspaceNav.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import Link from "next/link";
+import { workspaceService } from "@/services/threadService";
+import type { Workspace } from "@/lib/storage";
+import { ChevronDown, Hash } from "lucide-react";
+
+export function WorkspaceNav() {
+  const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    void workspaceService.listWorkspaces().then((w) =>
+      setWorkspaces([...w].sort((a, b) => (a.title || "").localeCompare(b.title || "")))
+    );
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    const onClick = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onClick);
+    return () => document.removeEventListener("mousedown", onClick);
+  }, [open]);
+
+  if (workspaces.length === 0) {
+    return (
+      <Link
+        href="/"
+        className="text-sm font-medium text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors"
+      >
+        Workspaces
+      </Link>
+    );
+  }
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="inline-flex items-center gap-1 text-sm font-medium text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors"
+      >
+        Workspaces
+        <ChevronDown size={14} className={`transition-transform ${open ? "rotate-180" : ""}`} />
+      </button>
+      {open && (
+        <div className="absolute right-0 top-full mt-2 w-56 rounded-xl border border-[var(--card-border)] bg-[var(--card-bg)] shadow-xl z-50 py-1 animate-in fade-in slide-in-from-top-1 duration-150">
+          {workspaces.map((w) => (
+            <Link
+              key={w.id}
+              href={`/w/${w.id}`}
+              onClick={() => setOpen(false)}
+              className="flex items-center gap-2 px-3 py-2 text-sm text-[var(--foreground)] hover:bg-[var(--muted)]/50 transition-colors"
+            >
+              <Hash size={14} className="text-[var(--muted-foreground)] shrink-0" />
+              <span className="truncate">{w.title?.trim() || "Untitled workspace"}</span>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}