@hed-hog/core 0.0.387 → 0.0.393

package/hedhog/frontend/app/mcp_chat/page.tsx.ejs

@@ -10,6 +10,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
+import { PageHeader } from '@/components/entity-list';
 import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import {
@@ -19,17 +20,26 @@ import {
   SheetTitle,
 } from '@/components/ui/sheet';
 import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
-import { SidebarTrigger } from '@/components/ui/sidebar';
 import { useFormDraft } from '@/hooks/use-form-draft';
 import { useIsMobile } from '@/hooks/use-mobile';
+import { usePersistedSheetWidth } from '@/hooks/use-persisted-sheet-width';
+import { cn } from '@/lib/utils';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { Bot, MessageSquare } from 'lucide-react';
+import { Bot, GripVerticalIcon, MessageSquare } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { toast } from 'sonner';
 import { ChatInput, ConversationSidebar, MessageFeed } from './chat-components';
 import { Conversation, Message } from './chat-types';
 
+const SIDEBAR_DEFAULT_WIDTH = 256;
+const SIDEBAR_MIN_WIDTH = 220;
+const SIDEBAR_MAX_WIDTH = 480;
+
+function clampSidebarWidth(width: number) {
+  return Math.max(SIDEBAR_MIN_WIDTH, Math.min(SIDEBAR_MAX_WIDTH, width));
+}
+
 export default function McpChatPage() {
   const { request, currentLocaleCode, refetchUser, accessToken, getSettingValue } = useApp();
   const t = useTranslations('core.McpChatPage');
@@ -55,6 +65,24 @@ export default function McpChatPage() {
   const streamingRunRef = useRef(0);
   const streamAbortRef = useRef<AbortController | null>(null);
 
+  const [sidebarWidth, setSidebarWidth] = usePersistedSheetWidth({
+    sheetId: 'core-mcp-chat-conversations-panel',
+    defaultWidth: SIDEBAR_DEFAULT_WIDTH,
+    minWidth: SIDEBAR_MIN_WIDTH,
+    maxWidth: SIDEBAR_MAX_WIDTH,
+  });
+  const [sidebarPreviewWidth, setSidebarPreviewWidth] = useState<number | null>(
+    null
+  );
+  const [isResizingSidebar, setIsResizingSidebar] = useState(false);
+  const sidebarResizeRef = useRef({
+    startX: 0,
+    startWidth: SIDEBAR_DEFAULT_WIDTH,
+  });
+  const currentSidebarWidth = clampSidebarWidth(
+    sidebarPreviewWidth ?? sidebarWidth
+  );
+
   const selectedConversationDraft = useFormDraft<number | null>({
     storageKey: 'mcp-chat-selected-conversation-draft',
     value: selectedConvId,
@@ -180,6 +208,46 @@ export default function McpChatPage() {
     };
   }, []);
 
+  useEffect(() => {
+    if (!isResizingSidebar) {
+      return;
+    }
+
+    function handlePointerMove(event: PointerEvent) {
+      const deltaX = event.clientX - sidebarResizeRef.current.startX;
+      setSidebarPreviewWidth(
+        clampSidebarWidth(sidebarResizeRef.current.startWidth + deltaX)
+      );
+    }
+
+    function handlePointerUp() {
+      setIsResizingSidebar(false);
+      if (sidebarPreviewWidth !== null) {
+        setSidebarWidth(sidebarPreviewWidth);
+      }
+      setSidebarPreviewWidth(null);
+    }
+
+    window.addEventListener('pointermove', handlePointerMove);
+    window.addEventListener('pointerup', handlePointerUp, { once: true });
+
+    return () => {
+      window.removeEventListener('pointermove', handlePointerMove);
+      window.removeEventListener('pointerup', handlePointerUp);
+    };
+  }, [isResizingSidebar, sidebarPreviewWidth, setSidebarWidth]);
+
+  function handleSidebarResizeStart(
+    event: React.PointerEvent<HTMLButtonElement>
+  ) {
+    event.preventDefault();
+    sidebarResizeRef.current = {
+      startX: event.clientX,
+      startWidth: currentSidebarWidth,
+    };
+    setIsResizingSidebar(true);
+  }
+
   async function streamAssistantMessage(responseMessages: Message[]) {
     const lastAssistantIdx = [...responseMessages]
       .map((msg, idx) => ({ msg, idx }))
@@ -585,30 +653,74 @@ export default function McpChatPage() {
     />
   );
 
+  const pageHeader = (
+    <div className="shrink-0 px-4">
+      <PageHeader
+        breadcrumbs={[
+          { label: t('breadcrumbDashboard'), href: '/' },
+          { label: t('breadcrumbManagement'), href: '/core/management' },
+          { label: t('breadcrumbCurrent') },
+        ]}
+        title={t('title')}
+        description={t('description')}
+      />
+    </div>
+  );
+
   if (!mcpEnabled) {
     return (
-      <div className="flex h-dvh min-h-0 items-center justify-center bg-background px-4">
-        <div className="flex max-w-md flex-col items-center gap-3 text-center">
-          <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-muted text-muted-foreground ring-1 ring-border">
-            <Bot className="h-7 w-7" />
+      <div className="flex h-dvh min-h-0 flex-col overflow-hidden bg-background">
+        {pageHeader}
+        <div className="flex min-h-0 flex-1 items-center justify-center px-4">
+          <div className="flex max-w-md flex-col items-center gap-3 text-center">
+            <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-muted text-muted-foreground ring-1 ring-border">
+              <Bot className="h-7 w-7" />
+            </div>
+            <p className="text-sm text-muted-foreground">{t('mcpDisabled')}</p>
           </div>
-          <h1 className="text-xl font-semibold tracking-tight">
-            {t('title')}
-          </h1>
-          <p className="text-sm text-muted-foreground">{t('mcpDisabled')}</p>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="flex h-dvh min-h-0 overflow-hidden bg-background">
-      {/* Sidebar */}
-      <aside className="hidden md:flex w-64 shrink-0 flex-col border-r bg-muted/30">
-        {sidebarContent}
-      </aside>
+    <div className="flex h-dvh min-h-0 flex-col overflow-hidden bg-background">
+      {pageHeader}
+      <div className="flex min-h-0 flex-1 overflow-hidden">
+        {/* Sidebar */}
+        <aside
+          className="relative hidden md:flex shrink-0 flex-col border-r bg-muted/30"
+          style={{ width: currentSidebarWidth }}
+        >
+          {sidebarContent}
+          <button
+            type="button"
+            aria-label={t('resizePanel')}
+            onPointerDown={handleSidebarResizeStart}
+            className="group absolute top-0 -right-1.5 z-10 flex h-full w-3 cursor-ew-resize items-center justify-center"
+          >
+            <span
+              className={cn(
+                'absolute inset-y-0 w-px transition-colors duration-150',
+                isResizingSidebar
+                  ? 'bg-primary'
+                  : 'bg-border delay-0 group-hover:bg-primary/70 group-hover:delay-150'
+              )}
+            />
+            <span
+              className={cn(
+                'relative z-10 pointer-events-none rounded-full border p-0.5 shadow-sm transition-colors',
+                isResizingSidebar
+                  ? 'border-primary bg-primary/15 text-primary-foreground'
+                  : 'bg-border/80 text-muted-foreground/70 group-hover:border-primary group-hover:bg-primary/15 group-hover:text-primary-foreground'
+              )}
+            >
+              <GripVerticalIcon className="size-3" />
+            </span>
+          </button>
+        </aside>
 
-      <Sheet
+        <Sheet
         open={isMobileConversationsOpen}
         onOpenChange={setIsMobileConversationsOpen}
       >
@@ -634,7 +746,6 @@ export default function McpChatPage() {
       <main className="flex-1 flex min-h-0 min-w-0 flex-col overflow-hidden">
         {isMobile && (
           <header className="h-12 shrink-0 border-b flex items-center px-3 gap-2 bg-background/90 backdrop-blur-sm md:hidden">
-            <SidebarTrigger className="h-8 w-8 cursor-pointer" />
             <Button
               variant="ghost"
               size="icon"
@@ -746,6 +857,7 @@ export default function McpChatPage() {
           </>
         )}
       </main>
+      </div>
 
       <AlertDialog
         open={Boolean(convToDelete)}

package/hedhog/frontend/app/pages/_components/page-delete-dialog.tsx.ejs

@@ -0,0 +1,343 @@
+'use client';
+
+import { CopyButton } from '@/components/copy-button';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import type { DeletionFile } from '@/lib/scaffold/delete-page';
+import { cn } from '@/lib/utils';
+import { useApp } from '@hed-hog/next-app-provider';
+import { AlertTriangle, Loader2, Trash2 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import type { SystemPage } from './system-page-types';
+
+export type MenuRemoval = {
+  id: number;
+  slug: string;
+  labelPt: string;
+};
+
+type PageDeleteDialogProps = {
+  page: SystemPage | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Menu a remover do banco; nulo quando não há menu ou o menu tem submenus. */
+  menuRemoval: MenuRemoval | null;
+  /** Página tem menu, mas ele tem filhos — não removemos o menu, só avisamos. */
+  menuHasChildrenWarning: boolean;
+  onDeleted: () => void;
+};
+
+type PreviewResponse = {
+  files: DeletionFile[];
+  steps: string[];
+};
+
+const CATEGORY_ORDER: DeletionFile['category'][] = [
+  'page',
+  'mirror',
+  'i18n',
+  'menu',
+  'migration',
+];
+
+export function PageDeleteDialog({
+  page,
+  open,
+  onOpenChange,
+  menuRemoval,
+  menuHasChildrenWarning,
+  onDeleted,
+}: PageDeleteDialogProps) {
+  const t = useTranslations('core.SystemPagesPage');
+  const { request } = useApp();
+
+  const [preview, setPreview] = useState<PreviewResponse | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [confirmText, setConfirmText] = useState('');
+  const [doneSteps, setDoneSteps] = useState<string[] | null>(null);
+
+  useEffect(() => {
+    if (!open || !page) {
+      setPreview(null);
+      setConfirmText('');
+      setDoneSteps(null);
+      return;
+    }
+
+    let cancelled = false;
+    setIsLoading(true);
+
+    fetch('/api/dev/pages', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        mode: 'preview',
+        route: page.route,
+        menuSlug: menuRemoval?.slug ?? null,
+        menuLabelPt: menuRemoval?.labelPt ?? null,
+      }),
+    })
+      .then(async (response) => {
+        if (!response.ok) {
+          throw new Error('preview failed');
+        }
+        const data = (await response.json()) as PreviewResponse;
+        if (!cancelled) {
+          setPreview(data);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          toast.error(t('deletePreviewError'));
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setIsLoading(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [open, page, menuRemoval, t]);
+
+  if (!page) {
+    return null;
+  }
+
+  const confirmMatches = confirmText.trim() === page.route;
+
+  const handleDelete = async () => {
+    if (!confirmMatches) {
+      return;
+    }
+
+    setIsDeleting(true);
+
+    try {
+      const response = await fetch('/api/dev/pages', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          mode: 'apply',
+          route: page.route,
+          menuSlug: menuRemoval?.slug ?? null,
+          menuLabelPt: menuRemoval?.labelPt ?? null,
+        }),
+      });
+
+      if (!response.ok) {
+        const data = (await response.json().catch(() => null)) as {
+          message?: string;
+        } | null;
+        toast.error(data?.message ?? t('deleteError'));
+        return;
+      }
+
+      const data = (await response.json()) as { steps: string[] };
+
+      // O menu sai do banco pelo frontend: o route handler do Next não carrega o
+      // token da API Nest. Só depois de os arquivos terem sido removidos.
+      if (menuRemoval) {
+        try {
+          await request({
+            url: '/menu',
+            method: 'DELETE',
+            data: { ids: [menuRemoval.id] },
+          });
+        } catch {
+          toast.error(t('deleteMenuError'));
+        }
+      }
+
+      toast.success(t('deleteSuccess'));
+      setDoneSteps(data.steps);
+      onDeleted();
+    } catch {
+      toast.error(t('deleteError'));
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const filesByCategory = CATEGORY_ORDER.map((category) => ({
+    category,
+    files: (preview?.files ?? []).filter((file) => file.category === category),
+  })).filter((group) => group.files.length > 0);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[85vh] max-w-2xl overflow-hidden">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Trash2 className="h-5 w-5 text-red-600" />
+            {t('deleteTitle')}
+          </DialogTitle>
+          <DialogDescription className="font-mono">
+            {page.route}
+          </DialogDescription>
+        </DialogHeader>
+
+        {doneSteps ? (
+          <div className="space-y-3">
+            <Alert>
+              <AlertTitle>{t('deleteDoneTitle')}</AlertTitle>
+              <AlertDescription>{t('deleteDoneDescription')}</AlertDescription>
+            </Alert>
+
+            {doneSteps.length > 0 ? (
+              <div className="space-y-1">
+                <p className="text-xs font-medium text-muted-foreground">
+                  {t('deleteDoneSteps')}
+                </p>
+                {doneSteps.map((command) => (
+                  <div
+                    key={command}
+                    className="flex items-center gap-2 rounded-lg border bg-muted/30 p-2"
+                  >
+                    <code className="min-w-0 flex-1 truncate text-xs">
+                      {command}
+                    </code>
+                    <CopyButton value={command} />
+                  </div>
+                ))}
+              </div>
+            ) : null}
+
+            <DialogFooter>
+              <Button onClick={() => onOpenChange(false)}>
+                {t('deleteClose')}
+              </Button>
+            </DialogFooter>
+          </div>
+        ) : (
+          <>
+            <ScrollArea className="max-h-[45vh]">
+              <div className="space-y-3 pr-3">
+                {page.referencedBy.length > 0 ? (
+                  <Alert variant="destructive">
+                    <AlertTriangle className="h-4 w-4" />
+                    <AlertTitle>{t('deleteReferencedTitle')}</AlertTitle>
+                    <AlertDescription>
+                      <p>
+                        {t('deleteReferencedDescription', {
+                          count: page.referencedBy.length,
+                        })}
+                      </p>
+                      <ul className="mt-1 list-disc pl-4">
+                        {page.referencedBy.map((file) => (
+                          <li key={file} className="font-mono text-xs">
+                            {file}
+                          </li>
+                        ))}
+                      </ul>
+                    </AlertDescription>
+                  </Alert>
+                ) : null}
+
+                {menuHasChildrenWarning ? (
+                  <Alert>
+                    <AlertTitle>{t('deleteMenuChildrenTitle')}</AlertTitle>
+                    <AlertDescription>
+                      {t('deleteMenuChildrenDescription')}
+                    </AlertDescription>
+                  </Alert>
+                ) : null}
+
+                {isLoading ? (
+                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    {t('deletePreviewLoading')}
+                  </div>
+                ) : (
+                  filesByCategory.map((group) => (
+                    <div key={group.category}>
+                      <p className="text-[10px] font-semibold tracking-[0.14em] text-muted-foreground uppercase">
+                        {t(`deleteCategory_${group.category}` as never)}
+                      </p>
+                      <div className="mt-1 space-y-1">
+                        {group.files.map((file) => (
+                          <div
+                            key={`${file.category}-${file.path}`}
+                            className="flex items-center gap-2 rounded-lg border bg-background/80 p-2"
+                          >
+                            <Badge
+                              variant="outline"
+                              className={cn(
+                                'rounded-full px-2 py-0 text-[10px]',
+                                file.action === 'delete'
+                                  ? 'border-red-500/30 bg-red-500/10 text-red-600'
+                                  : 'border-blue-500/30 bg-blue-500/10 text-blue-600'
+                              )}
+                            >
+                              {t(`deleteAction_${file.action}` as never)}
+                            </Badge>
+                            <span className="min-w-0 flex-1 truncate font-mono text-xs">
+                              {file.path}
+                            </span>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  ))
+                )}
+              </div>
+            </ScrollArea>
+
+            <div className="space-y-1.5">
+              <Label htmlFor="confirm-route" className="text-xs">
+                {t('deleteConfirmLabel')}
+              </Label>
+              <Input
+                id="confirm-route"
+                value={confirmText}
+                onChange={(event) => setConfirmText(event.target.value)}
+                placeholder={page.route}
+                autoComplete="off"
+                className="font-mono"
+              />
+            </div>
+
+            <DialogFooter>
+              <Button
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+                disabled={isDeleting}
+              >
+                {t('cancel')}
+              </Button>
+              <Button
+                className="bg-red-600 hover:bg-red-700"
+                disabled={!confirmMatches || isDeleting || isLoading}
+                onClick={handleDelete}
+              >
+                {isDeleting ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <Trash2 className="h-4 w-4" />
+                )}
+                {t('deleteConfirm')}
+              </Button>
+            </DialogFooter>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}