@larkup/workspace-app 0.0.0-stage → 0.2.0

package/src/components/data/notion-panel.tsx

@@ -0,0 +1,408 @@
+'use client';
+
+import { workspaceUrl, workspaceFetch as fetch } from '../../host';
+import { useState } from 'react';
+import useSWR from 'swr';
+import { toast } from 'sonner';
+import { useNotionAuth } from '../../hooks/use-notion-auth';
+import { formatErrorMessage } from '../../lib/shared/error-formatter';
+import {
+  ExternalLink,
+  Loader2,
+  CheckCircle2,
+  Database,
+  FileText,
+  RefreshCw,
+  AlertCircle,
+} from 'lucide-react';
+import { Button } from '@larkup/workspace-ui/button';
+import { Input } from '../ui/input';
+import { Checkbox } from '../ui/checkbox';
+import { DialogFooter } from '../ui/dialog';
+import { cn } from '../../lib/utils';
+
+interface NotionPage {
+  id: string;
+  title: string;
+  icon: string | null;
+  url: string;
+  lastEdited: string;
+  parentType: string;
+}
+
+interface NotionDatabase {
+  id: string;
+  title: string;
+  icon: string | null;
+  url: string;
+  lastEdited: string;
+  type: 'database';
+}
+
+interface NotionStatus {
+  connected: boolean;
+  configured: boolean;
+  pages: NotionPage[];
+  databases?: NotionDatabase[];
+  error?: string;
+}
+
+function NotionResourceIcon({ icon, isDatabase }: { icon: string | null; isDatabase: boolean }) {
+  if (icon?.startsWith('http')) {
+    return <img src={icon} alt="" className="size-5 rounded-sm object-contain" />;
+  }
+
+  return (
+    <span aria-hidden="true" className="block max-w-5 truncate text-base leading-none">
+      {icon || (isDatabase ? '📊' : '📄')}
+    </span>
+  );
+}
+
+export function NotionPanel({
+  onAdded,
+  onClose,
+  groupId,
+}: {
+  onAdded: () => void;
+  onClose?: () => void;
+  groupId: string;
+}) {
+  const {
+    data: statusData,
+    error: swrError,
+    isLoading,
+    mutate,
+  } = useSWR<NotionStatus>(workspaceUrl('/api/integrations/notion'), (url: string) =>
+    fetch(url).then((res) => {
+      if (!res.ok) throw new Error('Failed to fetch');
+      return res.json();
+    }),
+  );
+
+  const status = statusData || {
+    connected: false,
+    configured: false,
+    pages: [],
+    error: swrError ? formatErrorMessage(swrError) : undefined,
+  };
+
+  const loading = isLoading && !statusData;
+
+  const fetchStatus = () => mutate();
+
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [importing, setImporting] = useState(false);
+  const [disconnecting, setDisconnecting] = useState(false);
+  const [search, setSearch] = useState('');
+  const [showType, setShowType] = useState<'all' | 'pages' | 'databases'>('all');
+
+  const { connectToNotion } = useNotionAuth({
+    onSuccess: () => {
+      mutate();
+      toast.success('Successfully connected to Notion');
+    },
+  });
+
+  function togglePage(id: string) {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+
+  function toggleAll(items: { id: string }[]) {
+    const allSelected = items.every((p) => selected.has(p.id));
+    if (allSelected) {
+      setSelected((prev) => {
+        const next = new Set(prev);
+        items.forEach((p) => next.delete(p.id));
+        return next;
+      });
+    } else {
+      setSelected((prev) => {
+        const next = new Set(prev);
+        items.forEach((p) => next.add(p.id));
+        return next;
+      });
+    }
+  }
+
+  async function importSelected() {
+    if (selected.size === 0) {
+      toast.error('Select at least one page to import.');
+      return;
+    }
+
+    setImporting(true);
+    try {
+      const res = await fetch(workspaceUrl('/api/integrations/notion'), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ pageIds: Array.from(selected), groupId }),
+      });
+      const data = await res.json();
+
+      if (!res.ok) throw new Error(data.error ?? 'Import failed');
+
+      toast.success(
+        `${data.imported} of ${data.total} page${
+          data.total !== 1 ? 's' : ''
+        } imported successfully`,
+      );
+      setSelected(new Set());
+      onAdded();
+    } catch (err) {
+      toast.error(formatErrorMessage(err));
+    } finally {
+      setImporting(false);
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-3 p-4 py-16">
+        <Loader2 className="size-6 animate-spin text-muted-foreground" />
+        <p className="text-sm text-muted-foreground">Checking Notion connection…</p>
+      </div>
+    );
+  }
+
+  if (!status?.connected) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-4 p-4 py-12">
+        <div className="flex h-14 w-14 items-center justify-center rounded-2xl border bg-background/30">
+          <img src="/notion.png" alt="Notion" className="size-6 opacity-100" />
+        </div>
+        <div className="text-center max-w-md">
+          <h3 className="text-lg font-semibold text-foreground">Notion Not Connected</h3>
+          <p className="mt-1.5 text-sm text-muted-foreground leading-relaxed">
+            Please connect Notion from the integrations panel.
+          </p>
+
+          <div className="mt-4">
+            <Button size="sm" onClick={() => connectToNotion()}>
+              Connect Notion
+            </Button>
+          </div>
+
+          {status?.error && (
+            <div className="mt-3 flex items-center gap-2 rounded-lg border border-destructive/20 bg-destructive/5 px-3 py-2 text-xs text-destructive">
+              <AlertCircle className="size-3.5 shrink-0" />
+              {status.error}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  const allPages = status.pages || [];
+  const allDatabases = status.databases || [];
+  const query = search.toLowerCase().trim();
+
+  const filteredPages = query
+    ? allPages.filter((p) => p.title.toLowerCase().includes(query))
+    : allPages;
+
+  const filteredDatabases = query
+    ? allDatabases.filter((d) => d.title.toLowerCase().includes(query))
+    : allDatabases;
+
+  const visibleItems =
+    showType === 'pages'
+      ? filteredPages
+      : showType === 'databases'
+        ? filteredDatabases
+        : [...filteredPages, ...filteredDatabases];
+
+  return (
+    <div className="flex w-full min-w-0 flex-col">
+      <div className="flex flex-col gap-4 p-4">
+        {/* Connection status */}
+        <div className="flex items-center justify-between gap-3">
+          <div className="flex items-center gap-2 text-sm font-medium">
+            <CheckCircle2 className="size-4 text-green-600" />
+            <span>Notion Connected</span>
+            <span className="text-muted-foreground">
+              · {allPages.length} pages, {allDatabases.length} databases
+            </span>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={fetchStatus}
+            className="h-7 shrink-0 gap-1.5 text-xs"
+          >
+            <RefreshCw className="size-3" />
+            Refresh
+          </Button>
+        </div>
+
+        {/* Search + filter */}
+        <div className="flex flex-col sm:flex-row sm:items-center gap-2 px-0">
+          <Input
+            placeholder="Search pages…"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="flex-1 w-full"
+          />
+          <div className="flex h-10 w-full min-w-0 rounded-lg border border-border p-1 sm:w-auto">
+            {(['all', 'pages', 'databases'] as const).map((t) => (
+              <button
+                key={t}
+                type="button"
+                onClick={() => setShowType(t)}
+                className={cn(
+                  'h-full flex-1 sm:flex-none rounded-md px-3 text-xs font-medium transition-colors capitalize',
+                  showType === t
+                    ? 'bg-background text-foreground '
+                    : 'text-muted-foreground hover:text-foreground',
+                )}
+              >
+                {t}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Pages list */}
+        {visibleItems.length > 0 ? (
+          <div className="w-full min-w-0 overflow-hidden rounded-lg border border-border">
+            <div className="flex items-center justify-between border-b border-border px-3 py-2">
+              <span className="text-xs font-medium text-muted-foreground">
+                {visibleItems.length} item{visibleItems.length !== 1 ? 's' : ''} · {selected.size}{' '}
+                selected
+              </span>
+              <button
+                type="button"
+                className="text-xs text-primary hover:underline"
+                onClick={() => toggleAll(visibleItems)}
+              >
+                {visibleItems.every((p) => selected.has(p.id)) ? 'Clear all' : 'Select all'}
+              </button>
+            </div>
+            <ul
+              data-testid="notion-resource-list"
+              className="max-h-80 divide-y divide-border overflow-x-hidden overflow-y-auto"
+            >
+              {visibleItems.map((item) => {
+                const checked = selected.has(item.id);
+                const isDb = 'type' in item && item.type === 'database';
+                return (
+                  <li key={item.id} className="min-w-0 max-w-full overflow-hidden">
+                    <label
+                      className={cn(
+                        'flex w-full min-w-0 max-w-full cursor-pointer items-center gap-3 overflow-hidden px-3 py-2.5 transition-colors hover:bg-muted/50',
+                        checked && 'bg-accent/50',
+                      )}
+                    >
+                      <Checkbox
+                        className="shrink-0"
+                        checked={checked}
+                        onCheckedChange={() => togglePage(item.id)}
+                      />
+                      <span className="flex size-5 shrink-0 items-center justify-center overflow-hidden">
+                        <NotionResourceIcon icon={item.icon} isDatabase={isDb} />
+                      </span>
+                      <div className="min-w-0 flex-1">
+                        <span
+                          title={item.title}
+                          className="block max-w-full truncate text-sm font-medium text-foreground"
+                        >
+                          {item.title}
+                        </span>
+                        <span className="flex min-w-0 items-center gap-1.5 truncate text-[10px] text-muted-foreground">
+                          {isDb ? (
+                            <Database className="size-2.5" />
+                          ) : (
+                            <FileText className="size-2.5" />
+                          )}
+                          {isDb ? 'Database' : 'Page'}
+                          {item.lastEdited && (
+                            <>
+                              <span>·</span>
+                              {new Date(item.lastEdited).toLocaleDateString()}
+                            </>
+                          )}
+                        </span>
+                      </div>
+                      <a
+                        href={item.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        onClick={(e) => e.stopPropagation()}
+                        className="shrink-0 text-muted-foreground transition-colors hover:text-foreground"
+                      >
+                        <ExternalLink className="size-3 shrink-0" />
+                      </a>
+                    </label>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        ) : (
+          <div className="flex flex-col items-center justify-center rounded-lg py-12 text-center">
+            <FileText className="size-8 text-muted-foreground/30 mb-3" />
+            <p className="text-sm font-medium text-foreground">
+              {search ? 'No pages match your search.' : 'No pages found.'}
+            </p>
+            {!search && (
+              <p className="text-xs text-muted-foreground mt-1 max-w-87.5">
+                Make sure your integration has access to pages in Notion.
+              </p>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Import actions */}
+      <DialogFooter className="m-0! flex flex-row items-center justify-between space-x-0 gap-2 border-t border-border/70 bg-muted/50 p-4 sm:justify-between">
+        <Button
+          variant="destructive"
+          onClick={async () => {
+            setDisconnecting(true);
+            try {
+              const res = await fetch(workspaceUrl('/api/integrations/notion'), {
+                method: 'DELETE',
+              });
+              if (!res.ok) {
+                const data = await res.json();
+                throw new Error(data.error || 'Failed to disconnect');
+              }
+              toast.success('Disconnected from Notion');
+              fetchStatus();
+            } catch (err) {
+              toast.error(formatErrorMessage(err));
+            } finally {
+              setDisconnecting(false);
+            }
+          }}
+          disabled={importing || disconnecting}
+        >
+          {disconnecting ? <Loader2 className="size-4 mr-2 animate-spin" /> : null}
+          Disconnect
+        </Button>
+        <div className="flex items-center space-x-2">
+          <Button variant="outline" onClick={onClose} disabled={importing || disconnecting}>
+            Cancel
+          </Button>
+          <Button
+            onClick={importSelected}
+            disabled={importing || disconnecting || selected.size === 0}
+          >
+            {importing ? (
+              <Loader2 className="size-4 mr-2 animate-spin" />
+            ) : (
+              <img src="/notion-white.png" alt="Notion" className="size-4 mr-2" />
+            )}
+            Import {selected.size} page{selected.size !== 1 ? 's' : ''}
+          </Button>
+        </div>
+      </DialogFooter>
+    </div>
+  );
+}

package/src/components/data/paste-panel.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { workspaceUrl, workspaceFetch as fetch } from '../../host';
+import { useEffect, useRef, useState } from 'react';
+import { toast } from 'sonner';
+import { formatErrorMessage } from '../../lib/shared/error-formatter';
+import { Plus, Loader2 } from 'lucide-react';
+import { Button } from '@larkup/workspace-ui/button';
+import { TextSourceFields } from '@larkup/workspace-ui';
+import type { DataPrimaryAction } from './data-primary-action';
+
+export function PastePanel({
+  onAdded,
+  onActionChange,
+  groupId,
+}: {
+  onAdded: () => void;
+  onActionChange?: (action: DataPrimaryAction | null) => void;
+  groupId?: string;
+}) {
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const [saving, setSaving] = useState(false);
+  const groupIdRef = useRef(groupId ?? 'default');
+  groupIdRef.current = groupId ?? 'default';
+
+  async function submit() {
+    if (!content.trim()) {
+      toast.error('Nothing to add — paste some text first.');
+      return;
+    }
+    setSaving(true);
+    try {
+      const res = await fetch(workspaceUrl('/api/documents'), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          title: title.trim() || 'Pasted text',
+          content: content,
+          source: 'text',
+          groupId: groupIdRef.current,
+        }),
+      });
+      if (!res.ok) throw new Error((await res.json()).error ?? 'Failed');
+      toast.success('Added to corpus');
+      setTitle('');
+      setContent('');
+      onAdded();
+    } catch (err) {
+      toast.error(formatErrorMessage(err));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  useEffect(() => {
+    onActionChange?.({
+      label: 'Add text',
+      onClick: submit,
+      disabled: !content.trim(),
+      loading: saving,
+    });
+    return () => onActionChange?.(null);
+  }, [title, content, saving, groupId, onActionChange]);
+
+  return (
+    <div className="space-y-4 w-full">
+      <TextSourceFields
+        title={title}
+        content={content}
+        onTitleChange={setTitle}
+        onContentChange={setContent}
+      />
+      {!onActionChange && (
+        <Button onClick={submit} disabled={saving}>
+          {saving ? <Loader2 className="size-4 animate-spin" /> : <Plus className="size-4" />}
+          Add text
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/components/data/project-data-page.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { workspaceUrl, workspaceFetch as fetch } from '../../host';
+import { useState } from 'react';
+import useSWR from 'swr';
+import { useRouter } from 'next/navigation';
+import { Database, FolderOpen } from 'lucide-react';
+import { WorkspaceLineTabs, WorkspacePageHeading } from '@larkup/workspace-ui';
+import type { DataGroup } from '@larkup/core/types';
+import { DataWorkspace } from './data-workspace';
+import { GroupsPanel } from './groups-panel';
+
+const fetcher = (url: string) => fetch(url).then((response) => response.json());
+
+/** Simple, tab-first source management for the active Project. */
+export function ProjectDataPage() {
+  const router = useRouter();
+  const [activeView, setActiveView] = useState<'all' | 'groups'>('all');
+  const { data } = useSWR<{ groups: DataGroup[] }>(workspaceUrl('/api/groups'), fetcher);
+  const groups = data?.groups ?? [];
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="pt-6 px-6 md:px-8">
+        <WorkspacePageHeading
+          title="Data"
+          description="Add sources, organize groups, and manage indexing."
+        />
+        <WorkspaceLineTabs
+          className="mt-6"
+          items={[
+            { id: 'all', label: 'All Data', icon: Database },
+            { id: 'groups', label: 'Groups', icon: FolderOpen },
+          ]}
+          activeId={activeView}
+          onChange={setActiveView}
+        />
+      </div>
+
+      <div className="min-h-0 flex-1 mt-4">
+        {activeView === 'all' ? (
+          <DataWorkspace view="corpus" />
+        ) : (
+          <GroupsPanel
+            onAddToGroup={(groupId) => router.push(`/add?groupId=${encodeURIComponent(groupId)}`)}
+            onView={(groupId) => {
+              router.replace(`/data?groupId=${groupId}`);
+              setActiveView('all');
+            }}
+          />
+        )}
+      </div>
+    </div>
+  );
+}