openvolo 0.1.2

package/src/components/identities-section.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Plus, Trash2, ExternalLink } from "lucide-react";
+import type { ContactIdentity } from "@/lib/db/types";
+
+const platformLabels: Record<string, string> = {
+  x: "X / Twitter",
+  linkedin: "LinkedIn",
+  gmail: "Gmail",
+  substack: "Substack",
+};
+
+interface IdentitiesSectionProps {
+  contactId: string;
+  identities: ContactIdentity[];
+}
+
+export function IdentitiesSection({ contactId, identities }: IdentitiesSectionProps) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [adding, setAdding] = useState(false);
+  const [form, setForm] = useState({
+    platform: "x" as "x" | "linkedin" | "gmail" | "substack",
+    platformUserId: "",
+    platformHandle: "",
+    platformUrl: "",
+  });
+
+  async function handleAdd() {
+    if (!form.platformUserId) return;
+    setAdding(true);
+    try {
+      const res = await fetch(`/api/contacts/${contactId}/identities`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(form),
+      });
+      if (res.ok) {
+        setOpen(false);
+        setForm({ platform: "x", platformUserId: "", platformHandle: "", platformUrl: "" });
+        router.refresh();
+      }
+    } finally {
+      setAdding(false);
+    }
+  }
+
+  async function handleDelete(identityId: string) {
+    await fetch(`/api/contacts/${contactId}/identities/${identityId}`, {
+      method: "DELETE",
+    });
+    router.refresh();
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex justify-between items-center">
+        <h3 className="text-lg font-semibold">Platform Identities</h3>
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogTrigger asChild>
+            <Button size="sm" variant="outline">
+              <Plus className="mr-2 h-4 w-4" />
+              Add Identity
+            </Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Add Platform Identity</DialogTitle>
+            </DialogHeader>
+            <div className="grid gap-4 py-4">
+              <div className="grid gap-2">
+                <Label>Platform</Label>
+                <Select
+                  value={form.platform}
+                  onValueChange={(v) =>
+                    setForm({ ...form, platform: v as typeof form.platform })
+                  }
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {Object.entries(platformLabels).map(([k, v]) => (
+                      <SelectItem key={k} value={k}>
+                        {v}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="grid gap-2">
+                <Label>User ID *</Label>
+                <Input
+                  value={form.platformUserId}
+                  onChange={(e) =>
+                    setForm({ ...form, platformUserId: e.target.value })
+                  }
+                  placeholder="Platform user ID"
+                />
+              </div>
+              <div className="grid gap-2">
+                <Label>Handle</Label>
+                <Input
+                  value={form.platformHandle}
+                  onChange={(e) =>
+                    setForm({ ...form, platformHandle: e.target.value })
+                  }
+                  placeholder="@handle"
+                />
+              </div>
+              <div className="grid gap-2">
+                <Label>Profile URL</Label>
+                <Input
+                  value={form.platformUrl}
+                  onChange={(e) =>
+                    setForm({ ...form, platformUrl: e.target.value })
+                  }
+                  placeholder="https://..."
+                />
+              </div>
+              <Button onClick={handleAdd} disabled={adding || !form.platformUserId}>
+                {adding ? "Adding..." : "Add Identity"}
+              </Button>
+            </div>
+          </DialogContent>
+        </Dialog>
+      </div>
+
+      {identities.length === 0 ? (
+        <Card>
+          <CardContent className="pt-6">
+            <p className="text-sm text-muted-foreground text-center">
+              No platform identities linked yet.
+            </p>
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="space-y-2">
+          {identities.map((identity) => (
+            <Card key={identity.id}>
+              <CardContent className="flex items-center justify-between py-3">
+                <div className="flex items-center gap-3 min-w-0">
+                  <div className="min-w-0">
+                    <div className="flex items-center gap-2">
+                      <Badge variant="secondary">
+                        {platformLabels[identity.platform] ?? identity.platform}
+                      </Badge>
+                      {identity.isPrimary === 1 && (
+                        <Badge variant="outline" className="text-xs">
+                          Primary
+                        </Badge>
+                      )}
+                      <Badge
+                        variant="outline"
+                        className={
+                          identity.isActive
+                            ? "bg-chart-4/15 text-chart-4 border-chart-4/25"
+                            : "bg-muted/15 text-muted-foreground border-muted"
+                        }
+                      >
+                        {identity.isActive ? "Active" : "Inactive"}
+                      </Badge>
+                    </div>
+                    <p className="text-sm mt-1 truncate">
+                      {identity.platformHandle
+                        ? `@${identity.platformHandle}`
+                        : identity.platformUserId}
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  {identity.platformUrl && (
+                    <a
+                      href={identity.platformUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <Button variant="ghost" size="icon">
+                        <ExternalLink className="h-4 w-4" />
+                      </Button>
+                    </a>
+                  )}
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => handleDelete(identity.id)}
+                  >
+                    <Trash2 className="h-4 w-4 text-muted-foreground" />
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/pagination-controls.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+
+interface PaginationControlsProps {
+  page: number;
+  pageSize: number;
+  total: number;
+  createPageUrl: (page: number) => string;
+}
+
+export function PaginationControls({
+  page,
+  pageSize,
+  total,
+  createPageUrl,
+}: PaginationControlsProps) {
+  const totalPages = Math.ceil(total / pageSize);
+  if (totalPages <= 1) return null;
+
+  const start = (page - 1) * pageSize + 1;
+  const end = Math.min(page * pageSize, total);
+
+  // Build page number window
+  const pages = buildPageWindow(page, totalPages);
+
+  return (
+    <div className="flex items-center justify-between pt-4">
+      <p className="text-sm text-muted-foreground">
+        Showing {start}-{end} of {total}
+      </p>
+      <div className="flex items-center gap-1">
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={page <= 1}
+          asChild={page > 1}
+        >
+          {page > 1 ? (
+            <Link href={createPageUrl(page - 1)}>Prev</Link>
+          ) : (
+            <span>Prev</span>
+          )}
+        </Button>
+
+        {pages.map((p, i) =>
+          p === "ellipsis" ? (
+            <span key={`e${i}`} className="px-2 text-sm text-muted-foreground">
+              ...
+            </span>
+          ) : (
+            <Button
+              key={p}
+              variant={p === page ? "default" : "outline"}
+              size="sm"
+              className="min-w-[36px]"
+              asChild={p !== page}
+            >
+              {p === page ? (
+                <span>{p}</span>
+              ) : (
+                <Link href={createPageUrl(p)}>{p}</Link>
+              )}
+            </Button>
+          )
+        )}
+
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={page >= totalPages}
+          asChild={page < totalPages}
+        >
+          {page < totalPages ? (
+            <Link href={createPageUrl(page + 1)}>Next</Link>
+          ) : (
+            <span>Next</span>
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+/** Build a windowed array of page numbers with ellipsis markers. */
+function buildPageWindow(
+  current: number,
+  total: number
+): (number | "ellipsis")[] {
+  if (total <= 7) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+
+  const pages: (number | "ellipsis")[] = [1];
+
+  if (current > 3) {
+    pages.push("ellipsis");
+  }
+
+  const start = Math.max(2, current - 1);
+  const end = Math.min(total - 1, current + 1);
+
+  for (let i = start; i <= end; i++) {
+    pages.push(i);
+  }
+
+  if (current < total - 2) {
+    pages.push("ellipsis");
+  }
+
+  pages.push(total);
+
+  return pages;
+}

package/src/components/platform-connection-card.tsx

@@ -0,0 +1,292 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  CheckCircle,
+  XCircle,
+  AlertTriangle,
+  Loader2,
+  RefreshCw,
+  Unplug,
+  ArrowUpCircle,
+  ChevronDown,
+  ChevronRight,
+  Shield,
+} from "lucide-react";
+
+type ConnectionStatus = "disconnected" | "connected" | "needs_reauth";
+
+interface PlatformConnectionCardProps {
+  platform: string;
+  displayName: string;
+  accountHandle?: string;
+  lastSyncedAt?: number | null;
+  status: ConnectionStatus;
+  syncCapable?: boolean;
+  grantedScopes?: string;
+  onConnect: () => void;
+  onDisconnect: () => void;
+  onSync: () => void;
+  onEnableSync?: () => void;
+  connecting?: boolean;
+  syncing?: boolean;
+  disconnecting?: boolean;
+}
+
+/** Scope metadata: friendly label and capability group. */
+const SCOPE_META: Record<string, { label: string; group: string }> = {
+  // LinkedIn scopes
+  "openid": { label: "OpenID Connect", group: "Auth" },
+  "profile": { label: "Read Profile", group: "Profile" },
+  "email": { label: "Read Email", group: "Profile" },
+  "w_member_social": { label: "Create Posts", group: "Content" },
+  // Google scopes (full URLs — displayed as friendly labels)
+  "https://www.googleapis.com/auth/contacts.readonly": { label: "Read Contacts", group: "Contacts" },
+  "https://www.googleapis.com/auth/gmail.readonly": { label: "Read Email", group: "Email" },
+  // X scopes
+  "tweet.read": { label: "Read Tweets", group: "Tweets" },
+  "tweet.write": { label: "Write Tweets", group: "Tweets" },
+  "tweet.moderate.write": { label: "Moderate Replies", group: "Tweets" },
+  "users.read": { label: "Read Profiles", group: "Users" },
+  "like.read": { label: "Read Likes", group: "Engagement" },
+  "like.write": { label: "Like Tweets", group: "Engagement" },
+  "bookmark.read": { label: "Read Bookmarks", group: "Engagement" },
+  "bookmark.write": { label: "Save Bookmarks", group: "Engagement" },
+  "dm.read": { label: "Read DMs", group: "DMs" },
+  "dm.write": { label: "Send DMs", group: "DMs" },
+  "follows.read": { label: "Read Follows", group: "Contacts" },
+  "follows.write": { label: "Follow/Unfollow", group: "Contacts" },
+  "list.read": { label: "Read Lists", group: "Lists" },
+  "list.write": { label: "Manage Lists", group: "Lists" },
+  "mute.read": { label: "Read Mutes", group: "Moderation" },
+  "mute.write": { label: "Mute Accounts", group: "Moderation" },
+  "block.read": { label: "Read Blocks", group: "Moderation" },
+  "block.write": { label: "Block Accounts", group: "Moderation" },
+  "space.read": { label: "Read Spaces", group: "Other" },
+  "offline.access": { label: "Offline Access", group: "Other" },
+};
+
+/** Group order for display. */
+const GROUP_ORDER = ["Auth", "Profile", "Content", "Tweets", "Users", "Engagement", "Email", "DMs", "Contacts", "Lists", "Moderation", "Other"];
+
+/** Scopes that require Basic+ tier. */
+const BASIC_PLUS_SCOPES = new Set([
+  "follows.read", "follows.write",
+  "list.read", "list.write",
+  "mute.read", "mute.write",
+  "block.read", "block.write",
+  "space.read",
+]);
+
+function groupScopes(scopeString: string): { group: string; scopes: { scope: string; label: string; basicPlus: boolean }[] }[] {
+  const scopes = scopeString.split(" ").filter(Boolean);
+  const grouped = new Map<string, { scope: string; label: string; basicPlus: boolean }[]>();
+
+  for (const scope of scopes) {
+    const meta = SCOPE_META[scope];
+    const group = meta?.group ?? "Other";
+    const label = meta?.label ?? scope;
+
+    if (!grouped.has(group)) grouped.set(group, []);
+    grouped.get(group)!.push({ scope, label, basicPlus: BASIC_PLUS_SCOPES.has(scope) });
+  }
+
+  return GROUP_ORDER
+    .filter((g) => grouped.has(g))
+    .map((group) => ({ group, scopes: grouped.get(group)! }));
+}
+
+function formatRelativeTime(unixSeconds: number): string {
+  const now = Math.floor(Date.now() / 1000);
+  const diff = now - unixSeconds;
+
+  if (diff < 60) return "just now";
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+  return `${Math.floor(diff / 86400)}d ago`;
+}
+
+export function PlatformConnectionCard({
+  displayName,
+  accountHandle,
+  lastSyncedAt,
+  status,
+  syncCapable,
+  grantedScopes,
+  onConnect,
+  onDisconnect,
+  onSync,
+  onEnableSync,
+  connecting,
+  syncing,
+  disconnecting,
+}: PlatformConnectionCardProps) {
+  const [scopesOpen, setScopesOpen] = useState(false);
+  const showScopes = status === "connected" && grantedScopes;
+
+  return (
+    <div className="rounded-lg border">
+      <div className="flex items-center justify-between p-4">
+        <div className="space-y-1">
+          <div className="flex items-center gap-2">
+            <p className="font-medium">{displayName}</p>
+            {status === "connected" && (
+              <Badge variant="default" className="bg-green-600">
+                <CheckCircle className="mr-1 h-3 w-3" />
+                Connected
+              </Badge>
+            )}
+            {status === "needs_reauth" && (
+              <Badge variant="destructive">
+                <AlertTriangle className="mr-1 h-3 w-3" />
+                Needs Re-auth
+              </Badge>
+            )}
+            {status === "disconnected" && (
+              <Badge variant="secondary">
+                <XCircle className="mr-1 h-3 w-3" />
+                Not connected
+              </Badge>
+            )}
+          </div>
+
+          {status === "connected" && accountHandle && (
+            <p className="text-sm text-muted-foreground">
+              Signed in as <span className="font-mono">{accountHandle}</span>
+            </p>
+          )}
+          {status === "connected" && lastSyncedAt && (
+            <p className="text-xs text-muted-foreground">
+              Last synced {formatRelativeTime(lastSyncedAt)}
+            </p>
+          )}
+          {status === "connected" && !syncCapable && (
+            <p className="text-xs text-muted-foreground">
+              Contact sync requires X API Basic tier ($200/mo)
+            </p>
+          )}
+          {status === "disconnected" && (
+            <p className="text-sm text-muted-foreground">
+              Connect via OAuth 2.0 to post and import contacts
+            </p>
+          )}
+          {status === "needs_reauth" && (
+            <p className="text-sm text-muted-foreground">
+              Your session expired. Reconnect to continue syncing.
+            </p>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2">
+          {status === "disconnected" && (
+            <Button onClick={onConnect} disabled={connecting}>
+              {connecting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              Connect
+            </Button>
+          )}
+
+          {status === "needs_reauth" && (
+            <Button onClick={onConnect} variant="outline" disabled={connecting}>
+              {connecting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              Reconnect
+            </Button>
+          )}
+
+          {status === "connected" && (
+            <>
+              {syncCapable ? (
+                <Button
+                  onClick={onSync}
+                  variant="outline"
+                  size="sm"
+                  disabled={syncing}
+                >
+                  {syncing ? (
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  ) : (
+                    <RefreshCw className="mr-2 h-4 w-4" />
+                  )}
+                  {syncing ? "Syncing..." : "Sync Now"}
+                </Button>
+              ) : onEnableSync ? (
+                <Button
+                  onClick={onEnableSync}
+                  variant="outline"
+                  size="sm"
+                  disabled={connecting}
+                >
+                  {connecting ? (
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  ) : (
+                    <ArrowUpCircle className="mr-2 h-4 w-4" />
+                  )}
+                  Enable Contact Sync
+                </Button>
+              ) : null}
+              <Button
+                onClick={onDisconnect}
+                variant="ghost"
+                size="sm"
+                disabled={disconnecting}
+                className="text-destructive hover:text-destructive"
+              >
+                {disconnecting ? (
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                ) : (
+                  <Unplug className="mr-2 h-4 w-4" />
+                )}
+                Disconnect
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+
+      {showScopes && (
+        <div className="border-t">
+          <button
+            type="button"
+            onClick={() => setScopesOpen(!scopesOpen)}
+            className="flex w-full items-center gap-2 px-4 py-2 text-xs text-muted-foreground hover:bg-muted/50 transition-colors"
+          >
+            {scopesOpen ? (
+              <ChevronDown className="h-3 w-3" />
+            ) : (
+              <ChevronRight className="h-3 w-3" />
+            )}
+            <Shield className="h-3 w-3" />
+            <span>Granted Permissions ({grantedScopes.split(" ").filter(Boolean).length})</span>
+          </button>
+
+          {scopesOpen && (
+            <div className="px-4 pb-3 space-y-2">
+              {groupScopes(grantedScopes).map(({ group, scopes }) => (
+                <div key={group} className="flex items-start gap-2">
+                  <span className="text-xs font-medium text-muted-foreground w-24 shrink-0 pt-0.5">
+                    {group}
+                  </span>
+                  <div className="flex flex-wrap gap-1">
+                    {scopes.map(({ scope, label, basicPlus }) => (
+                      <Badge
+                        key={scope}
+                        variant="outline"
+                        className="text-[10px] px-1.5 py-0 font-normal"
+                      >
+                        {label}
+                        {basicPlus && (
+                          <span className="ml-1 text-[9px] text-muted-foreground/60">Basic+</span>
+                        )}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/priority-badge.tsx

@@ -0,0 +1,17 @@
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const priorityColors: Record<string, string> = {
+  low: "bg-chart-1/15 text-chart-1 border-chart-1/25",
+  medium: "bg-chart-2/15 text-chart-2 border-chart-2/25",
+  high: "bg-chart-4/15 text-chart-4 border-chart-4/25",
+  urgent: "bg-destructive/15 text-destructive border-destructive/25",
+};
+
+export function PriorityBadge({ priority }: { priority: string }) {
+  return (
+    <Badge variant="outline" className={cn("font-medium", priorityColors[priority] ?? "bg-muted/15 text-muted-foreground border-muted")}>
+      {priority}
+    </Badge>
+  );
+}