@ima-jin/ui 1.0.0

package/src/notification-bell.tsx

@@ -0,0 +1,144 @@
+'use client';
+
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { useNotifications } from './notification-provider';
+
+function relativeTime(dateStr: string): string {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const minutes = Math.floor(diff / 60_000);
+  if (minutes < 1) return 'just now';
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days === 1) return 'Yesterday';
+  return `${days}d ago`;
+}
+
+function BellIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
+      <path d="M13.73 21a2 2 0 0 1-3.46 0" />
+    </svg>
+  );
+}
+
+export function NotificationBell() {
+  const { unreadCount, notifications, markAsRead, markAllAsRead, refresh } = useNotifications();
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  const handleOpen = useCallback(async () => {
+    if (!open) {
+      setOpen(true);
+      setLoading(true);
+      await refresh();
+      setLoading(false);
+    } else {
+      setOpen(false);
+    }
+  }, [open, refresh]);
+
+  useEffect(() => {
+    if (!open) return;
+    function handleClickOutside(e: MouseEvent) {
+      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape') setOpen(false);
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [open]);
+
+  const hasUnread = notifications.some(n => !n.read);
+
+  return (
+    <div className="relative" ref={panelRef}>
+      <button
+        onClick={handleOpen}
+        className={`relative p-2 rounded-lg transition ${
+          open ? 'bg-gray-100 dark:bg-gray-800' : 'hover:bg-gray-100 dark:hover:bg-gray-800'
+        }`}
+        title="Notifications"
+        aria-label={`Notifications${unreadCount > 0 ? `, ${unreadCount} unread` : ''}`}
+        aria-expanded={open}
+      >
+        <BellIcon className="w-5 h-5 text-gray-600 dark:text-gray-300" />
+        {unreadCount > 0 && (
+          <span className="absolute -top-0.5 -right-0.5 bg-red-500 text-white text-[10px] font-bold rounded-full min-w-[1.1rem] h-[1.1rem] flex items-center justify-center px-1 leading-none pointer-events-none">
+            {unreadCount > 99 ? '99+' : unreadCount}
+          </span>
+        )}
+      </button>
+
+      {open && (
+        <div className="absolute right-0 mt-2 w-80 bg-gray-900 border border-gray-700 rounded-lg shadow-lg z-50 flex flex-col max-h-[24rem]">
+          {/* Header */}
+          <div className="flex items-center justify-between px-4 py-3 border-b border-gray-700 shrink-0">
+            <span className="text-sm font-semibold text-white">Notifications</span>
+            {hasUnread && (
+              <button
+                onClick={() => markAllAsRead()}
+                className="text-xs text-blue-400 hover:text-blue-300 transition"
+              >
+                Mark all as read
+              </button>
+            )}
+          </div>
+
+          {/* Body */}
+          <div className="overflow-y-auto flex-1">
+            {loading ? (
+              <div className="px-4 py-6 text-center text-sm text-gray-400">Loading…</div>
+            ) : notifications.length === 0 ? (
+              <div className="px-4 py-6 text-center text-sm text-gray-400">No notifications yet</div>
+            ) : (
+              notifications.map(notification => (
+                <button
+                  key={notification.id}
+                  onClick={() => markAsRead(notification.id)}
+                  className={`w-full text-left px-4 py-3 border-b border-gray-800 last:border-0 hover:bg-gray-800 transition flex items-start gap-3 ${
+                    !notification.read ? 'bg-gray-800/50' : ''
+                  }`}
+                >
+                  {/* Unread dot — space always reserved so text aligns */}
+                  <span className="shrink-0 w-2 h-2 rounded-full mt-1.5 flex items-center justify-center">
+                    {!notification.read && (
+                      <span className="block w-2 h-2 rounded-full bg-blue-500" aria-hidden="true" />
+                    )}
+                  </span>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium text-white truncate">{notification.title}</p>
+                    {notification.body && (
+                      <p className="text-xs text-gray-400 mt-0.5 line-clamp-2">{notification.body}</p>
+                    )}
+                    <p className="text-xs text-gray-500 mt-1">{relativeTime(notification.createdAt)}</p>
+                  </div>
+                </button>
+              ))
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/notification-provider.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import React, { createContext, useContext, useState, useEffect, useRef, useCallback } from 'react';
+import { useToast } from './toast';
+
+export interface Notification {
+  id: string;
+  title: string;
+  body?: string;
+  urgency?: 'normal' | 'urgent';
+  read: boolean;
+  createdAt: string;
+}
+
+export interface NotificationContextValue {
+  unreadCount: number;
+  notifications: Notification[];
+  markAsRead: (id: string) => Promise<void>;
+  markAllAsRead: () => Promise<void>;
+  refresh: () => Promise<void>;
+}
+
+const NotificationContext = createContext<NotificationContextValue | null>(null);
+
+const emptyValue: NotificationContextValue = {
+  unreadCount: 0,
+  notifications: [],
+  markAsRead: async () => {},
+  markAllAsRead: async () => {},
+  refresh: async () => {},
+};
+
+export function NotificationProvider({ children }: { children: React.ReactNode }) {
+  const notifyUrl = process.env.NEXT_PUBLIC_NOTIFY_URL;
+  const [unreadCount, setUnreadCount] = useState(0);
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+  const hasWarnedRef = useRef(false);
+  const lastCountRef = useRef(-1); // -1 = not yet initialised, skip toast on first load
+  const lastNewIdRef = useRef<string | null>(null);
+  const { toast } = useToast();
+
+  // Keep toast functions in a ref so fetchAndMaybeToast doesn't need them as deps
+  const toastRef = useRef(toast);
+  toastRef.current = toast;
+
+  const fetchAndMaybeToast = useCallback(async () => {
+    if (!notifyUrl) return;
+    try {
+      const res = await fetch(`${notifyUrl}/api/notifications/unread`, { credentials: 'include' });
+      if (!res.ok) return;
+      const data = await res.json();
+      const count: number = data.count ?? 0;
+
+      if (lastCountRef.current >= 0 && count > lastCountRef.current) {
+        // New notifications arrived — fetch the latest one and toast
+        try {
+          const listRes = await fetch(`${notifyUrl}/api/notifications?limit=1`, { credentials: 'include' });
+          if (listRes.ok) {
+            const listData = await listRes.json();
+            const latest: Notification | undefined = listData.notifications?.[0] ?? listData[0];
+            if (latest && latest.id !== lastNewIdRef.current) {
+              lastNewIdRef.current = latest.id;
+              if (latest.urgency === 'urgent') {
+                toastRef.current.warning(latest.title);
+              } else {
+                toastRef.current.info(latest.title);
+              }
+            }
+          }
+        } catch {}
+      }
+
+      lastCountRef.current = count;
+      setUnreadCount(count);
+    } catch {
+      if (!hasWarnedRef.current) {
+        console.warn('[notifications] notify service unavailable — bell will show 0 unread');
+        hasWarnedRef.current = true;
+      }
+    }
+  }, [notifyUrl]);
+
+  useEffect(() => {
+    if (!notifyUrl) return;
+    fetchAndMaybeToast();
+    const interval = setInterval(fetchAndMaybeToast, 30_000);
+    return () => clearInterval(interval);
+  }, [notifyUrl, fetchAndMaybeToast]);
+
+  const refresh = useCallback(async () => {
+    if (!notifyUrl) return;
+    try {
+      const res = await fetch(`${notifyUrl}/api/notifications?limit=20`, { credentials: 'include' });
+      if (!res.ok) return;
+      const data = await res.json();
+      setNotifications(data.notifications ?? data ?? []);
+    } catch {}
+  }, [notifyUrl]);
+
+  const markAsRead = useCallback(async (id: string) => {
+    if (!notifyUrl) return;
+    try {
+      await fetch(`${notifyUrl}/api/notifications/${id}/read`, {
+        method: 'POST',
+        credentials: 'include',
+      });
+      setNotifications(prev => prev.map(n => n.id === id ? { ...n, read: true } : n));
+      setUnreadCount(prev => Math.max(0, prev - 1));
+    } catch {}
+  }, [notifyUrl]);
+
+  const markAllAsRead = useCallback(async () => {
+    if (!notifyUrl) return;
+    try {
+      await fetch(`${notifyUrl}/api/notifications/read-all`, {
+        method: 'POST',
+        credentials: 'include',
+      });
+      setNotifications(prev => prev.map(n => ({ ...n, read: true })));
+      setUnreadCount(0);
+      lastCountRef.current = 0;
+    } catch {}
+  }, [notifyUrl]);
+
+  return (
+    <NotificationContext.Provider value={{ unreadCount, notifications, markAsRead, markAllAsRead, refresh }}>
+      {children}
+    </NotificationContext.Provider>
+  );
+}
+
+export function useNotifications(): NotificationContextValue {
+  return useContext(NotificationContext) ?? emptyValue;
+}

package/src/theme-init.ts

@@ -0,0 +1,10 @@
+export const themeInitScript = `
+  (function() {
+    var theme = localStorage.getItem('theme');
+    if (theme === 'light') {
+      document.documentElement.classList.remove('dark');
+    } else {
+      document.documentElement.classList.add('dark');
+    }
+  })()
+`;

package/src/toast.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import React, { createContext, useContext, useReducer, useCallback, useEffect } from 'react';
+
+export type ToastType = 'success' | 'error' | 'warning' | 'info';
+
+interface Toast {
+  id: string;
+  type: ToastType;
+  message: string;
+  sticky: boolean;
+}
+
+type Action =
+  | { type: 'ADD'; toast: Toast }
+  | { type: 'REMOVE'; id: string };
+
+function reducer(state: Toast[], action: Action): Toast[] {
+  switch (action.type) {
+    case 'ADD':
+      return [...state, action.toast].slice(-5);
+    case 'REMOVE':
+      return state.filter((t) => t.id !== action.id);
+    default:
+      return state;
+  }
+}
+
+interface ToastContextValue {
+  toast: {
+    success: (message: string) => void;
+    error: (message: string) => void;
+    warning: (message: string) => void;
+    info: (message: string) => void;
+  };
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+const BORDER_COLORS: Record<ToastType, string> = {
+  success: 'border-l-green-500',
+  error: 'border-l-red-500',
+  warning: 'border-l-amber-500',
+  info: 'border-l-blue-500',
+};
+
+const DURATIONS: Record<ToastType, number> = {
+  success: 4000,
+  error: 0,
+  warning: 6000,
+  info: 4000,
+};
+
+function AutoDismiss({
+  id,
+  duration,
+  onDismiss,
+}: {
+  id: string;
+  duration: number;
+  onDismiss: (id: string) => void;
+}) {
+  useEffect(() => {
+    const timer = setTimeout(() => onDismiss(id), duration);
+    return () => clearTimeout(timer);
+  }, [id, duration, onDismiss]);
+  return null;
+}
+
+function ToastItem({
+  toast,
+  onDismiss,
+}: {
+  toast: Toast;
+  onDismiss: () => void;
+}) {
+  return (
+    <div
+      className={`flex items-start gap-3 bg-gray-900 text-white px-4 py-3 rounded-lg shadow-lg border-l-4 ${BORDER_COLORS[toast.type]} min-w-[280px] max-w-sm`}
+      style={{ animation: 'toastSlideIn 0.2s ease-out' }}
+    >
+      <p className="flex-1 text-sm">{toast.message}</p>
+      <button
+        onClick={onDismiss}
+        className="text-gray-400 hover:text-white transition-colors shrink-0 text-lg leading-none"
+        aria-label="Dismiss"
+      >
+        ×
+      </button>
+    </div>
+  );
+}
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, dispatch] = useReducer(reducer, []);
+
+  const dismiss = useCallback((id: string) => {
+    dispatch({ type: 'REMOVE', id });
+  }, []);
+
+  const add = useCallback((type: ToastType, message: string) => {
+    const id =
+      typeof crypto !== 'undefined' && crypto.randomUUID
+        ? crypto.randomUUID()
+        : String(Date.now() + Math.random());
+    const sticky = type === 'error';
+    dispatch({ type: 'ADD', toast: { id, type, message, sticky } });
+  }, []);
+
+  const toast = {
+    success: (message: string) => add('success', message),
+    error: (message: string) => add('error', message),
+    warning: (message: string) => add('warning', message),
+    info: (message: string) => add('info', message),
+  };
+
+  return (
+    <ToastContext.Provider value={{ toast }}>
+      {children}
+      <div
+        className="fixed bottom-4 right-4 z-[9999] flex flex-col gap-2 items-end"
+        aria-live="polite"
+      >
+        <style>{`
+          @keyframes toastSlideIn {
+            from { transform: translateX(calc(100% + 1rem)); opacity: 0; }
+            to { transform: translateX(0); opacity: 1; }
+          }
+        `}</style>
+        {toasts.map((t) => (
+          <React.Fragment key={t.id}>
+            {!t.sticky && DURATIONS[t.type] > 0 && (
+              <AutoDismiss id={t.id} duration={DURATIONS[t.type]} onDismiss={dismiss} />
+            )}
+            <ToastItem toast={t} onDismiss={() => dismiss(t.id)} />
+          </React.Fragment>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast(): ToastContextValue {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error('useToast must be used within a ToastProvider');
+  return ctx;
+}

package/src/use-identities.ts

@@ -0,0 +1,69 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { getActingAs, setActingAs } from './acting-as';
+
+export interface GroupIdentity {
+  groupDid: string;
+  role: string;
+  scope: string;
+  name: string | null;
+  handle: string | null;
+}
+
+export interface IdentityConfig {
+  enabledServices: string[];
+  landingService: string | null;
+}
+
+export function useIdentities(authUrl: string | null, profileUrl?: string | null): {
+  identities: GroupIdentity[];
+  loading: boolean;
+  activeIdentity: string | null;
+  activeConfig: IdentityConfig | null;
+  setActiveIdentity: (did: string | null) => void;
+} {
+  const [identities, setIdentities] = useState<GroupIdentity[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [activeIdentity, setActiveIdentityState] = useState<string | null>(null);
+  const [activeConfig, setActiveConfig] = useState<IdentityConfig | null>(null);
+
+  useEffect(() => {
+    setActiveIdentityState(getActingAs());
+  }, []);
+
+  useEffect(() => {
+    if (!authUrl) return;
+    setLoading(true);
+    fetch(`${authUrl}/api/groups`, { credentials: 'include' })
+      .then((r) => r.ok ? r.json() : null)
+      .then((data) => {
+        if (Array.isArray(data)) setIdentities(data);
+        else if (data?.groups) setIdentities(data.groups);
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, [authUrl]);
+
+  useEffect(() => {
+    const configBase = profileUrl;
+    if (!configBase || !activeIdentity) {
+      setActiveConfig(null);
+      return;
+    }
+    fetch(`${configBase}/api/forest/${encodeURIComponent(activeIdentity)}/config/public`)
+      .then((r) => r.ok ? r.json() : null)
+      .then((data) => {
+        if (data) setActiveConfig(data as IdentityConfig);
+      })
+      .catch(() => {});
+  }, [authUrl, profileUrl, activeIdentity]);
+
+  function setActiveIdentity(did: string | null) {
+    setActingAs(did);
+    setActiveIdentityState(did);
+    window.location.reload();
+  }
+
+  return { identities, loading, activeIdentity, activeConfig, setActiveIdentity };
+}