feat: some fixes

2026-02-02 11:17:50 +03:00
parent f46a3265c6
commit 74ef1108e1
10 changed files with 945 additions and 262 deletions
--- a/components/dialog-create-placements.tsx
+++ b/components/dialog-create-placements.tsx
@@ -1,11 +1,12 @@
 "use client";

-import { useState, useEffect, useRef } from "react";
-import { Loader2, Plus, Check, ChevronRight, X, AlertCircle } from "lucide-react";
+import { useState, useEffect } from "react";
+import { Loader2, Plus, Check, ChevronRight, X, AlertCircle, BookOpen } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
+import { Badge } from "@/components/ui/badge";
 import {
  Dialog,
  DialogContent,
@@ -36,6 +37,9 @@ interface CreatePlacementsDialogProps {
  workspaceId: string;
  projectId: string;
  existingPlacements: Placement[];
+  prefilledCreativeId?: string | null;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
  onSuccess: () => void;
  children?: React.ReactNode;
 }
@@ -47,10 +51,15 @@ export function CreatePlacementsDialog({
  workspaceId,
  projectId,
  existingPlacements,
+  prefilledCreativeId = null,
+  open: controlledOpen,
+  onOpenChange,
  onSuccess,
  children,
 }: CreatePlacementsDialogProps) {
-  const [open, setOpen] = useState(false);
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
+
  const [step, setStep] = useState(1);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
@@ -59,9 +68,10 @@ export function CreatePlacementsDialog({
  const [newChannelInput, setNewChannelInput] = useState("");
  const [selectedChannels, setSelectedChannels] = useState<ChannelInput[]>([]);
  const [existingChannels, setExistingChannels] = useState<string[]>([]);
+  const [projectChannels, setProjectChannels] = useState<Channel[]>([]);

  // Step 2: Details
-  const [creativeId, setCreativeId] = useState<string | null>(null);
+  const [creativeId, setCreativeId] = useState<string | null>(prefilledCreativeId);
  const [format, setFormat] = useState("");
  const [cost, setCost] = useState("");
  const [placementDate, setPlacementDate] = useState("");
@@ -89,7 +99,14 @@ export function CreatePlacementsDialog({
    if (!isOpen) {
      resetForm();
    }
-    setOpen(isOpen);
+    setInternalOpen(isOpen);
+    onOpenChange?.(isOpen);
+  };
+
+  const handleTriggerClick = () => {
+    resetForm();
+    setInternalOpen(true);
+    onOpenChange?.(true);
  };

  const resetForm = () => {
@@ -97,7 +114,8 @@ export function CreatePlacementsDialog({
    setNewChannelInput("");
    setSelectedChannels([]);
    setExistingChannels([]);
-    setCreativeId(null);
+    setProjectChannels([]);
+    setCreativeId(prefilledCreativeId);
    setFormat("");
    setCost("");
    setPlacementDate("");
@@ -106,15 +124,47 @@ export function CreatePlacementsDialog({
    setCreatedCount(null);
  };

+  // Load creatives when dialog opens or when moving to step 2
  const loadCreatives = async () => {
    try {
-      const response = await creativesApi.listByProject(workspaceId, projectId);
+      const response = await creativesApi.list(workspaceId, {
+        project_id: projectId,
+        include_archived: false,
+        size: 100,
+      });
      setCreatives(response.items);
+
+      // Auto-select prefilled creative if set
+      if (prefilledCreativeId && response.items.length > 0) {
+        const prefilled = response.items.find((c) => c.id === prefilledCreativeId);
+        if (prefilled) {
+          setCreativeId(prefilled.id);
+        }
+      }
    } catch (err) {
      console.error("Failed to load creatives:", err);
    }
  };

+  // Load project channels when opening dialog
+  const loadProjectChannels = async () => {
+    try {
+      const projectPlacements = await placementsApi.getByProject(workspaceId, projectId);
+      const channels = projectPlacements.map((p) => p.channel);
+      setProjectChannels(channels);
+    } catch (err) {
+      console.error("Failed to load project channels:", err);
+    }
+  };
+
+  // Load creatives and project channels when dialog opens
+  useEffect(() => {
+    if (isOpen) {
+      loadCreatives();
+      loadProjectChannels();
+    }
+  }, [isOpen, workspaceId, projectId, prefilledCreativeId]);
+
  const addChannel = async () => {
    const username = parseChannelInput(newChannelInput);
    if (!username) {
@@ -128,9 +178,16 @@ export function CreatePlacementsDialog({
      return;
    }

+    // Check if channel exists in project channels
+    const projectChannel = projectChannels.find((c) => c.username?.toLowerCase() === lowerUsername);
+    if (projectChannel) {
+      setSelectedChannels([...selectedChannels, { username, channelId: projectChannel.id }]);
+      setNewChannelInput("");
+      setError(null);
+      return;
+    }
+
    // If channel already has placements in this project, reuse its channel_id.
-    // Channels are global, so we don't need to create them again - we just need
-    // the channel_id to create a new placement for this channel.
    if (existingUsernames.has(lowerUsername)) {
      const existingChannelId = getExistingChannelIdByUsername(lowerUsername);
      if (!existingChannelId) {
@@ -144,7 +201,6 @@ export function CreatePlacementsDialog({
    }

    // Channel doesn't exist in project yet. Create it globally via API to get channel_id.
-    // If channel already exists globally, API will return existing channel.
    try {
      const createResponse = await channelsApi.create([{ username }]);
      const channelId = createResponse.results[0]?.channel.id;
@@ -206,16 +262,16 @@ export function CreatePlacementsDialog({
    }
  };

-  const handleTriggerClick = () => {
-    resetForm();
-    setOpen(true);
-  };
-
  const selectedCreative = creatives.find((c) => c.id === creativeId);

+  // If open is controlled, don't render DialogTrigger
+  const isControlled = controlledOpen !== undefined;
+
  return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogTrigger asChild onClick={handleTriggerClick}>{children}</DialogTrigger>
+    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
+      {!isControlled && (
+        <DialogTrigger asChild onClick={handleTriggerClick}>{children}</DialogTrigger>
+      )}
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>Создать размещения</DialogTitle>
@@ -278,8 +334,9 @@ export function CreatePlacementsDialog({
            {/* Step 1: Channels */}
            {step === 1 && (
              <div className="space-y-4">
+                {/* Add new channel */}
                <div className="space-y-2">
-                  <Label>Добавить каналы</Label>
+                  <Label>Добавить канал</Label>
                  <div className="flex gap-2">
                    <Input
                      placeholder="t.me/username или @username"
@@ -297,6 +354,7 @@ export function CreatePlacementsDialog({
                  </p>
                </div>

+                {/* Selected channels */}
                {selectedChannels.length > 0 && (
                  <div className="space-y-2">
                    <Label>Выбранные каналы ({selectedChannels.length})</Label>
@@ -320,6 +378,57 @@ export function CreatePlacementsDialog({
                    </div>
                  </div>
                )}
+
+                {/* Existing project channels */}
+                {projectChannels.length > 0 && (
+                  <div className="space-y-2">
+                    <div className="flex items-center gap-2">
+                      <Label className="text-base">Существующие каналы проекта</Label>
+                      <Badge variant="outline" className="text-xs">
+                        {projectChannels.length}
+                      </Badge>
+                    </div>
+                    <div className="max-h-48 overflow-y-auto space-y-2">
+                      {projectChannels.map((channel) => (
+                        <div
+                          key={channel.id}
+                          className="flex items-center justify-between p-2 rounded-md bg-muted"
+                        >
+                          <div className="flex items-center gap-2">
+                            <span className="text-sm font-medium">{channel.title}</span>
+                            {channel.username && (
+                              <span className="text-xs text-muted-foreground">@{channel.username}</span>
+                            )}
+                          </div>
+                          {selectedChannels.some((c) => c.channelId === channel.id) ? (
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="icon"
+                              onClick={() => removeChannel(channel.username || channel.id)}
+                            >
+                              <X className="h-4 w-4" />
+                            </Button>
+                          ) : (
+                            <Button
+                              type="button"
+                              variant="outline"
+                              size="sm"
+                              onClick={() => {
+                                const channelId = channel.id;
+                                const username = channel.username || channel.id;
+                                setSelectedChannels([...selectedChannels, { username, channelId }]);
+                              }}
+                            >
+                              <Plus className="h-4 w-4 mr-1" />
+                              Выбрать
+                            </Button>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
              </div>
            )}

@@ -453,7 +562,7 @@ export function CreatePlacementsDialog({
                <Button
                  type="button"
                  onClick={() => {
-                    if (step === 1) {
+                    if (step === 1 && !prefilledCreativeId) {
                      loadCreatives();
                    }
                    setStep(step + 1);
--- a/components/telegram-post-preview.tsx
+++ b/components/telegram-post-preview.tsx
@@ -0,0 +1,226 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { ExternalLink } from "lucide-react";
+
+interface TelegramPostPreviewProps {
+  text: string;
+  mediaItems?: Array<{ media_type: string; media_file_id: string }>;
+  buttons?: Array<{ text: string; url: string }>;
+  inviteLinkPreview?: string;
+}
+
+export function TelegramPostPreview({
+  text,
+  mediaItems,
+  buttons,
+  inviteLinkPreview = "https://t.me/+AbCdEfGhIjK",
+}: TelegramPostPreviewProps) {
+  const [hoveredLink, setHoveredLink] = useState<string | null>(null);
+
+  const renderTextWithLinks = () => {
+    const result: React.ReactNode[] = [];
+    let lastIndex = 0;
+    const patterns = [
+      { regex: /<a\s+class=["']tg-link["']>([^<]*)<\/a>/gi, type: 'tg-link' },
+      { regex: /\{invite_link\}/gi, type: 'single' },
+    ];
+
+    const matches: { start: number; end: number; type: string; text?: string }[] = [];
+
+    patterns.forEach(({ regex, type }) => {
+      let match;
+      while ((match = regex.exec(text)) !== null) {
+        matches.push({
+          start: match.index!,
+          end: match.index! + match[0].length,
+          type,
+          text: match[1],
+        });
+      }
+    });
+
+    matches.sort((a, b) => a.start - b.start);
+
+    matches.forEach((match) => {
+      if (lastIndex < match.start) {
+        result.push(<span key={`text-${lastIndex}`}>{text.slice(lastIndex, match.start)}</span>);
+      }
+
+      const linkContent = match.type === 'tg-link' && match.text ? match.text : '[ссылка]';
+
+      result.push(
+        <TooltipProvider key={`link-${match.start}`}>
+          <Tooltip open={hoveredLink === `${match.start}-${match.end}`} onOpenChange={(open) => setHoveredLink(open ? `${match.start}-${match.end}` : null)}>
+            <TooltipTrigger asChild>
+              <a
+                href="#"
+                onClick={(e) => e.preventDefault()}
+                className="text-primary font-medium underline hover:opacity-80 transition-opacity"
+                onMouseEnter={() => setHoveredLink(`${match.start}-${match.end}`)}
+                onMouseLeave={() => setHoveredLink(null)}
+              >
+                {linkContent}
+              </a>
+            </TooltipTrigger>
+            <TooltipContent>
+              <div className="space-y-1">
+                <p className="text-xs text-muted-foreground">Сюда будет подставлена ссылка на канал:</p>
+                <div className="flex items-center gap-2">
+                  <ExternalLink className="h-3.5 w-3.5" />
+                  <span className="font-mono text-xs">{inviteLinkPreview}</span>
+                </div>
+              </div>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      );
+
+      lastIndex = match.end;
+    });
+
+    if (lastIndex < text.length) {
+      result.push(<span key={`text-end-${lastIndex}`}>{text.slice(lastIndex)}</span>);
+    }
+
+    return result;
+  };
+
+  const renderButton = (button: { text: string; url: string }, index: number) => {
+    const hasInviteLink = button.url === '{{invite_link}}';
+
+    return (
+      <TooltipProvider key={index}>
+        <Tooltip open={hoveredLink === `button-${index}`} onOpenChange={(open) => setHoveredLink(open ? `button-${index}` : null)}>
+          <TooltipTrigger asChild>
+            <button
+              className={`w-full py-2 text-sm font-medium transition-colors ${
+                buttons && buttons.length === 1 ? 'text-primary hover:bg-primary/10 rounded-full' : 'text-primary hover:bg-primary/10 rounded-md'
+              }`}
+            >
+              {button.text}
+            </button>
+          </TooltipTrigger>
+          {hasInviteLink && (
+            <TooltipContent>
+              <div className="space-y-1">
+                <p className="text-xs text-muted-foreground">Сюда будет подставлена ссылка на канал:</p>
+                <div className="flex items-center gap-2">
+                  <ExternalLink className="h-3.5 w-3.5" />
+                  <span className="font-mono text-xs">{inviteLinkPreview}</span>
+                </div>
+              </div>
+            </TooltipContent>
+          )}
+        </Tooltip>
+      </TooltipProvider>
+    );
+  };
+
+  const getMediaGrid = () => {
+    if (!mediaItems || mediaItems.length === 0) return null;
+    const count = mediaItems.length;
+
+    if (count === 1) {
+      return (
+        <div className="rounded-lg overflow-hidden bg-muted h-64 flex items-center justify-center">
+          <MediaPreview media={mediaItems[0]} />
+        </div>
+      );
+    }
+
+    if (count === 2) {
+      return (
+        <div className="grid grid-cols-2 gap-0.5 rounded-lg overflow-hidden">
+          {mediaItems.map((media, index) => (
+            <div key={index} className="aspect-square bg-muted flex items-center justify-center">
+              <MediaPreview media={media} />
+            </div>
+          ))}
+        </div>
+      );
+    }
+
+    if (count === 3) {
+      return (
+        <div className="grid grid-cols-2 grid-rows-2 gap-0.5 rounded-lg overflow-hidden">
+          <div className="row-span-2 bg-muted flex items-center justify-center">
+            <MediaPreview media={mediaItems[0]} />
+          </div>
+          <div className="bg-muted flex items-center justify-center">
+            <MediaPreview media={mediaItems[1]} />
+          </div>
+          <div className="bg-muted flex items-center justify-center">
+            <MediaPreview media={mediaItems[2]} />
+          </div>
+        </div>
+      );
+    }
+
+    if (count >= 4) {
+      return (
+        <div className="grid grid-cols-2 grid-rows-2 gap-0.5 rounded-lg overflow-hidden">
+          {mediaItems.slice(0, 4).map((media, index) => (
+            <div key={index} className="aspect-square bg-muted flex items-center justify-center">
+              <MediaPreview media={media} />
+            </div>
+          ))}
+          {mediaItems.length > 4 && (
+            <div className="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-2 py-1 rounded">
+              +{mediaItems.length - 4}
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <div className="w-full max-w-[384px] mx-auto bg-background rounded-xl overflow-hidden border shadow-sm">
+      <div className="p-3 space-y-2">
+        {mediaItems && mediaItems.length > 0 && (
+          <div className="relative">
+            {getMediaGrid()}
+          </div>
+        )}
+
+        <div className="whitespace-pre-wrap text-sm leading-relaxed px-1">
+          {renderTextWithLinks()}
+        </div>
+      </div>
+
+      {buttons && buttons.length > 0 && (
+        <div className="border-t px-3 pb-3 pt-2">
+          {buttons.map((button, index) => renderButton(button, index))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function MediaPreview({ media }: { media: { media_type: string; media_file_id: string } }) {
+  return (
+    <div className="flex flex-col items-center gap-2">
+      {media.media_type === "photo" && (
+        <span className="text-4xl">📷</span>
+      )}
+      {media.media_type === "video" && (
+        <span className="text-4xl">🎬</span>
+      )}
+      {media.media_type === "animation" && (
+        <span className="text-4xl">🎞️</span>
+      )}
+      <span className="text-xs text-muted-foreground font-mono">
+        {media.media_file_id.slice(0, 12)}...
+      </span>
+    </div>
+  );
+}