openvolo 0.1.2

package/src/app/dashboard/content/[id]/engagement-actions.tsx

@@ -0,0 +1,167 @@
+"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 { Textarea } from "@/components/ui/textarea";
+import { Heart, Repeat2, MessageCircle, Loader2, Send } from "lucide-react";
+import type { Engagement } from "@/lib/db/types";
+
+interface EngagementActionsProps {
+  tweetId: string;
+  contentPostId: string;
+  engagementHistory: Engagement[];
+}
+
+type EngageAction = "like" | "unlike" | "retweet" | "unretweet" | "reply";
+
+export function EngagementActions({
+  tweetId,
+  contentPostId,
+  engagementHistory,
+}: EngagementActionsProps) {
+  const router = useRouter();
+  const [loading, setLoading] = useState<EngageAction | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [showReply, setShowReply] = useState(false);
+  const [replyText, setReplyText] = useState("");
+
+  // Determine initial toggle state from engagement history
+  const hasLiked = engagementHistory.some(
+    (e) => e.engagementType === "like" && e.source === "manual"
+  );
+  const hasRetweeted = engagementHistory.some(
+    (e) => e.engagementType === "retweet" && e.source === "manual"
+  );
+
+  const [liked, setLiked] = useState(hasLiked);
+  const [retweeted, setRetweeted] = useState(hasRetweeted);
+
+  async function handleEngage(action: EngageAction, text?: string) {
+    setLoading(action);
+    setError(null);
+
+    try {
+      const res = await fetch("/api/platforms/x/engage", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action, tweetId, contentPostId, text }),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        setError(data.error ?? "Action failed");
+        return;
+      }
+
+      // Update optimistic state
+      if (action === "like") setLiked(true);
+      if (action === "unlike") setLiked(false);
+      if (action === "retweet") setRetweeted(true);
+      if (action === "unretweet") setRetweeted(false);
+      if (action === "reply") {
+        setReplyText("");
+        setShowReply(false);
+      }
+
+      // Refresh to update engagement history
+      router.refresh();
+    } catch {
+      setError("Action failed. Please try again.");
+    } finally {
+      setLoading(null);
+    }
+  }
+
+  return (
+    <Card>
+      <CardContent className="pt-6 space-y-3">
+        <h3 className="text-sm font-medium">Actions</h3>
+
+        <div className="flex items-center gap-2">
+          {/* Like / Unlike */}
+          <Button
+            variant={liked ? "default" : "outline"}
+            size="sm"
+            disabled={loading !== null}
+            onClick={() => handleEngage(liked ? "unlike" : "like")}
+          >
+            {loading === "like" || loading === "unlike" ? (
+              <Loader2 className="mr-1 h-4 w-4 animate-spin" />
+            ) : (
+              <Heart
+                className={`mr-1 h-4 w-4 ${liked ? "fill-current" : ""}`}
+              />
+            )}
+            {liked ? "Liked" : "Like"}
+          </Button>
+
+          {/* Retweet / Unretweet */}
+          <Button
+            variant={retweeted ? "default" : "outline"}
+            size="sm"
+            disabled={loading !== null}
+            onClick={() => handleEngage(retweeted ? "unretweet" : "retweet")}
+          >
+            {loading === "retweet" || loading === "unretweet" ? (
+              <Loader2 className="mr-1 h-4 w-4 animate-spin" />
+            ) : (
+              <Repeat2 className="mr-1 h-4 w-4" />
+            )}
+            {retweeted ? "Retweeted" : "Retweet"}
+          </Button>
+
+          {/* Reply toggle */}
+          <Button
+            variant={showReply ? "default" : "outline"}
+            size="sm"
+            disabled={loading !== null}
+            onClick={() => setShowReply(!showReply)}
+          >
+            <MessageCircle className="mr-1 h-4 w-4" />
+            Reply
+          </Button>
+        </div>
+
+        {/* Reply input */}
+        {showReply && (
+          <div className="space-y-2">
+            <Textarea
+              placeholder="Write your reply..."
+              value={replyText}
+              onChange={(e) => setReplyText(e.target.value)}
+              rows={3}
+              className="resize-none"
+            />
+            <div className="flex items-center justify-between">
+              <span className="text-xs text-muted-foreground">
+                {replyText.length}/280
+              </span>
+              <Button
+                size="sm"
+                disabled={!replyText.trim() || replyText.length > 280 || loading !== null}
+                onClick={() => handleEngage("reply", replyText)}
+              >
+                {loading === "reply" ? (
+                  <Loader2 className="mr-1 h-4 w-4 animate-spin" />
+                ) : (
+                  <Send className="mr-1 h-4 w-4" />
+                )}
+                Send Reply
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Error */}
+        {error && (
+          <div className="rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-800 dark:border-red-800 dark:bg-red-950 dark:text-red-200">
+            {error}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/app/dashboard/content/[id]/page.tsx

@@ -0,0 +1,253 @@
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { getContentItem, getThreadItems } from "@/lib/db/queries/content";
+import { listEngagementsByContentPost } from "@/lib/db/queries/engagements";
+import { getPlatformAccountByPlatform } from "@/lib/db/queries/platform-accounts";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft, ExternalLink, Heart, MessageCircle, Repeat2, Quote } from "lucide-react";
+import { EngagementActions } from "./engagement-actions";
+
+const contentTypeLabels: Record<string, string> = {
+  post: "Post",
+  article: "Article",
+  thread: "Thread",
+  reply: "Reply",
+  image: "Image",
+  video: "Video",
+  email: "Email",
+  dm: "DM",
+  newsletter: "Newsletter",
+};
+
+function formatDate(unix: number | null | undefined): string {
+  if (!unix) return "Unknown date";
+  return new Date(unix * 1000).toLocaleDateString("en-US", {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  });
+}
+
+export default async function ContentDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const item = getContentItem(id);
+
+  if (!item) {
+    notFound();
+  }
+
+  const snapshot = item.post?.engagementSnapshot
+    ? JSON.parse(item.post.engagementSnapshot)
+    : null;
+
+  // Check if X account is connected (for engagement actions)
+  const xAccount = getPlatformAccountByPlatform("x");
+  const canEngage = !!xAccount && xAccount.status === "active" && !!item.post?.platformPostId;
+
+  // Get engagement history for this post
+  const engagementHistory = item.post
+    ? listEngagementsByContentPost(item.post.id)
+    : [];
+
+  // Get thread context if this item belongs to a thread
+  const threadItems = item.threadId ? getThreadItems(item.threadId) : [];
+  const isThread = threadItems.length > 1;
+
+  return (
+    <div className="space-y-6 max-w-3xl">
+      {/* Back navigation */}
+      <div className="flex items-center gap-2">
+        <Button variant="ghost" size="sm" asChild>
+          <Link href="/dashboard/content">
+            <ArrowLeft className="mr-1 h-4 w-4" />
+            Content
+          </Link>
+        </Button>
+      </div>
+
+      {/* Main content card */}
+      <Card>
+        <CardContent className="pt-6 space-y-4">
+          {/* Header: type badges + date */}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Badge variant="secondary">
+                {contentTypeLabels[item.contentType] ?? item.contentType}
+              </Badge>
+              {item.origin && (
+                <Badge variant="outline">{item.origin}</Badge>
+              )}
+              {item.direction && (
+                <Badge variant="outline">{item.direction}</Badge>
+              )}
+              {item.status === "draft" && (
+                <Badge variant="outline" className="border-yellow-500 text-yellow-600">
+                  draft
+                </Badge>
+              )}
+              {isThread && (
+                <Badge variant="outline">
+                  Thread ({threadItems.length} tweets)
+                </Badge>
+              )}
+            </div>
+            {item.post?.platformUrl && (
+              <Button variant="ghost" size="sm" asChild>
+                <a
+                  href={item.post.platformUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <ExternalLink className="mr-1 h-4 w-4" />
+                  View on X
+                </a>
+              </Button>
+            )}
+          </div>
+
+          {/* Title (if present) */}
+          {item.title && (
+            <h2 className="text-lg font-semibold">{item.title}</h2>
+          )}
+
+          {/* Tweet body */}
+          <div className="whitespace-pre-wrap text-sm leading-relaxed">
+            {item.body ?? "No content"}
+          </div>
+
+          {/* Timestamp */}
+          <p className="text-xs text-muted-foreground">
+            {formatDate(item.post?.publishedAt ?? item.createdAt)}
+          </p>
+
+          {/* Engagement metrics */}
+          {snapshot && (
+            <div className="flex items-center gap-6 pt-2 border-t text-sm text-muted-foreground">
+              <span className="flex items-center gap-1.5" title="Likes">
+                <Heart className="h-4 w-4" />
+                {snapshot.likes ?? 0}
+              </span>
+              <span className="flex items-center gap-1.5" title="Replies">
+                <MessageCircle className="h-4 w-4" />
+                {snapshot.replies ?? 0}
+              </span>
+              <span className="flex items-center gap-1.5" title="Retweets">
+                <Repeat2 className="h-4 w-4" />
+                {snapshot.retweets ?? 0}
+              </span>
+              <span className="flex items-center gap-1.5" title="Quotes">
+                <Quote className="h-4 w-4" />
+                {snapshot.quotes ?? 0}
+              </span>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Thread context */}
+      {isThread && (
+        <Card>
+          <CardContent className="pt-6">
+            <h3 className="text-sm font-medium mb-3">Thread ({threadItems.length} tweets)</h3>
+            <div className="space-y-0">
+              {threadItems.map((ti, idx) => {
+                const isCurrent = ti.id === item.id;
+                return (
+                  <div key={ti.id} className="flex gap-3">
+                    {/* Vertical connector */}
+                    <div className="flex flex-col items-center">
+                      <div
+                        className={`w-2.5 h-2.5 rounded-full shrink-0 ${
+                          isCurrent ? "bg-primary" : "bg-muted-foreground/30"
+                        }`}
+                      />
+                      {idx < threadItems.length - 1 && (
+                        <div className="w-0.5 flex-1 bg-muted-foreground/20 min-h-4" />
+                      )}
+                    </div>
+
+                    {/* Tweet content */}
+                    {isCurrent ? (
+                      <div className="pb-3 flex-1">
+                        <p className="text-sm font-medium text-foreground">
+                          {ti.body
+                            ? ti.body.length > 100
+                              ? ti.body.slice(0, 100) + "..."
+                              : ti.body
+                            : "No content"}
+                        </p>
+                        <Badge variant="secondary" className="text-xs mt-1">
+                          Current
+                        </Badge>
+                      </div>
+                    ) : (
+                      <Link
+                        href={`/dashboard/content/${ti.id}`}
+                        className="pb-3 flex-1 group"
+                      >
+                        <p className="text-sm text-muted-foreground group-hover:text-foreground transition-colors">
+                          {ti.body
+                            ? ti.body.length > 100
+                              ? ti.body.slice(0, 100) + "..."
+                              : ti.body
+                            : "No content"}
+                        </p>
+                      </Link>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Engagement action bar */}
+      {canEngage && item.post && (
+        <EngagementActions
+          tweetId={item.post.platformPostId!}
+          contentPostId={item.post.id}
+          engagementHistory={engagementHistory}
+        />
+      )}
+
+      {/* Engagement history */}
+      {engagementHistory.length > 0 && (
+        <Card>
+          <CardContent className="pt-6">
+            <h3 className="text-sm font-medium mb-3">Your Activity</h3>
+            <div className="space-y-2">
+              {engagementHistory.map((e) => (
+                <div
+                  key={e.id}
+                  className="flex items-center justify-between text-sm text-muted-foreground py-1 border-b last:border-b-0"
+                >
+                  <div className="flex items-center gap-2">
+                    <Badge variant="outline" className="text-xs">
+                      {e.engagementType}
+                    </Badge>
+                    {e.content && (
+                      <span className="truncate max-w-xs">{e.content}</span>
+                    )}
+                  </div>
+                  <span className="text-xs">
+                    {formatDate(e.createdAt)}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}