revert fb8e77bb68

revert style: clean up code with prettier and eslint
2026-07-12 21:02:03 +02:00
1 parent 27de078f54
commit e85e4d74ea
@@ -1,7 +1,7 @@
-"use client";
+'use client'

-import { useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
+import { useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
 import {
  ChevronRight,
  Copy as CopyIcon,
@@ -17,10 +17,10 @@ import {
  Power,
  PowerOff,
  Trash2,
-} from "lucide-react";
-import React from "react";
-import { CatalogIcon, LAYOUT_COLORS } from "@/components/admin/catalog-tree";
-import { Badge } from "@/components/ui/badge";
+} from 'lucide-react'
+import React from 'react'
+import { CatalogIcon, LAYOUT_COLORS } from '@/components/admin/catalog-tree'
+import { Badge } from '@/components/ui/badge'
 import {
  ContextMenu,
  ContextMenuContent,
@@ -28,54 +28,54 @@ import {
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuTrigger,
-} from "@/components/ui/context-menu";
-import { translateCaption } from "@/lib/catalog-translations";
-import { cn } from "@/lib/utils";
+} from '@/components/ui/context-menu'
+import { translateCaption } from '@/lib/catalog-translations'
+import { cn } from '@/lib/utils'

 export interface FlatTreeNode {
-  id: number;
-  caption: string;
-  parentId: number;
-  enabled: string;
-  visible: string;
-  iconImage: number;
-  iconColor: number;
-  pageLayout: string;
-  childCount: number;
-  itemCount: number;
-  depth: number;
-  isExpanded: boolean;
+  id: number
+  caption: string
+  parentId: number
+  enabled: string
+  visible: string
+  iconImage: number
+  iconColor: number
+  pageLayout: string
+  childCount: number
+  itemCount: number
+  depth: number
+  isExpanded: boolean
 }

 export interface TreeItemProps {
-  node: FlatTreeNode;
-  sortMode: boolean;
-  isSelected: boolean;
-  isFocused: boolean;
-  isMultiSelected: boolean;
-  isAncestorOfSelected?: boolean;
-  isOverlay?: boolean;
-  onToggleExpand: (id: number) => void;
-  onSelect: (id: number, e?: React.MouseEvent) => void;
-  onAddSubpage: (parentId: number) => void;
-  onToggleEnabled: (id: number, currentEnabled: string) => void;
-  onToggleVisible: (id: number, currentVisible: string) => void;
-  onDuplicate: (id: number) => void;
-  onDelete: (id: number) => void;
-  onOpenFull: (id: number) => void;
-  isLoading?: boolean;
+  node: FlatTreeNode
+  sortMode: boolean
+  isSelected: boolean
+  isFocused: boolean
+  isMultiSelected: boolean
+  isAncestorOfSelected?: boolean
+  isOverlay?: boolean
+  onToggleExpand: (id: number) => void
+  onSelect: (id: number, e?: React.MouseEvent) => void
+  onAddSubpage: (parentId: number) => void
+  onToggleEnabled: (id: number, currentEnabled: string) => void
+  onToggleVisible: (id: number, currentVisible: string) => void
+  onDuplicate: (id: number) => void
+  onDelete: (id: number) => void
+  onOpenFull: (id: number) => void
+  isLoading?: boolean
 }

 export function SortableTreeItem(props: TreeItemProps) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
    id: props.node.id,
    disabled: !props.sortMode,
-  });
+  })

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
-  };
+  }

  return (
    <div ref={setNodeRef} style={style}>
@@ -85,7 +85,7 @@ export function SortableTreeItem(props: TreeItemProps) {
        dragHandleProps={props.sortMode ? { ...attributes, ...listeners } : undefined}
      />
    </div>
-  );
+  )
 }

 export const TreeItemContent = React.memo(
@@ -109,13 +109,13 @@ export const TreeItemContent = React.memo(
    onOpenFull,
    isLoading,
  }: TreeItemProps & {
-    isDragging?: boolean;
-    dragHandleProps?: Record<string, unknown>;
+    isDragging?: boolean
+    dragHandleProps?: Record<string, unknown>
  }) {
-    const isDisabled = node.enabled !== "1";
-    const isHidden = node.visible !== "1";
-    const italianName = translateCaption(node.caption);
-    const layoutColor = LAYOUT_COLORS[node.pageLayout] || "bg-muted text-muted-foreground";
+    const isDisabled = node.enabled !== '1'
+    const isHidden = node.visible !== '1'
+    const italianName = translateCaption(node.caption)
+    const layoutColor = LAYOUT_COLORS[node.pageLayout] || 'bg-muted text-muted-foreground'

    const content = (
      // biome-ignore lint/a11y/useSemanticElements: wrapped by ContextMenuTrigger asChild (Radix); a real <button> would conflict with sortable handle inside
@@ -123,23 +123,26 @@ export const TreeItemContent = React.memo(
        role="button"
        tabIndex={sortMode ? -1 : 0}
        className={cn(
-          "flex items-center gap-1 rounded-md px-1.5 py-1 group transition-colors",
-          !sortMode && "cursor-pointer",
-          isSelected && !isDragging && "bg-primary/10 ring-1 ring-primary/30",
-          isMultiSelected && !isSelected && !isDragging && "bg-primary/5 ring-1 ring-primary/15",
-          isFocused && !isSelected && !isMultiSelected && "ring-2 ring-[var(--admin-focus-ring)]/40",
-          !isSelected && !isMultiSelected && !isFocused && !isDragging && "hover:bg-accent/60",
-          isAncestorOfSelected && !isSelected && !isMultiSelected && "border-l-2 border-l-primary/30",
-          isDisabled && "opacity-40",
-          isDragging && "opacity-30",
-          isOverlay && "bg-card shadow-lg border opacity-100",
+          'flex items-center gap-1 rounded-md px-1.5 py-1 group transition-colors',
+          !sortMode && 'cursor-pointer',
+          isSelected && !isDragging && 'bg-primary/10 ring-1 ring-primary/30',
+          isMultiSelected && !isSelected && !isDragging && 'bg-primary/5 ring-1 ring-primary/15',
+          isFocused && !isSelected && !isMultiSelected && 'ring-2 ring-[var(--admin-focus-ring)]/40',
+          !isSelected && !isMultiSelected && !isFocused && !isDragging && 'hover:bg-accent/60',
+          isAncestorOfSelected &&
+            !isSelected &&
+            !isMultiSelected &&
+            'border-l-2 border-l-primary/30',
+          isDisabled && 'opacity-40',
+          isDragging && 'opacity-30',
+          isOverlay && 'bg-card shadow-lg border opacity-100',
        )}
        style={{ paddingLeft: isOverlay ? 8 : `${node.depth * 20 + 8}px` }}
        onClick={(e) => !sortMode && onSelect(node.id, e)}
        onKeyDown={(e) => {
-          if (!sortMode && (e.key === "Enter" || e.key === " ")) {
-            e.preventDefault();
-            onSelect(node.id, e as unknown as React.MouseEvent);
+          if (!sortMode && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault()
+            onSelect(node.id, e as unknown as React.MouseEvent)
          }
        }}
      >
@@ -158,8 +161,8 @@ export const TreeItemContent = React.memo(
          <button
            type="button"
            onClick={(e) => {
-              e.stopPropagation();
-              onToggleExpand(node.id);
+              e.stopPropagation()
+              onToggleExpand(node.id)
            }}
            className="flex items-center justify-center h-5 w-5 shrink-0 rounded hover:bg-accent"
          >
@@ -168,8 +171,8 @@ export const TreeItemContent = React.memo(
            ) : (
              <ChevronRight
                className={cn(
-                  "h-3.5 w-3.5 text-muted-foreground transition-transform duration-150",
-                  node.isExpanded && "rotate-90",
+                  'h-3.5 w-3.5 text-muted-foreground transition-transform duration-150',
+                  node.isExpanded && 'rotate-90',
                )}
              />
            )}
@@ -206,18 +209,18 @@ export const TreeItemContent = React.memo(
          )}
          <Badge
            className={cn(
-              "h-4 px-1 text-[8px] font-mono opacity-0 group-hover:opacity-100 transition-opacity border-0",
+              'h-4 px-1 text-[8px] font-mono opacity-0 group-hover:opacity-100 transition-opacity border-0',
              layoutColor,
            )}
          >
-            {node.pageLayout.replace("default_3x3", "3x3")}
+            {node.pageLayout.replace('default_3x3', '3x3')}
          </Badge>
        </div>
      </div>
-    );
+    )

    // In sort mode or overlay, no context menu
-    if (sortMode || isOverlay) return content;
+    if (sortMode || isOverlay) return content

    return (
      <ContextMenu>
@@ -252,12 +255,20 @@ export const TreeItemContent = React.memo(
          </ContextMenuItem>
          <ContextMenuSeparator />
          <ContextMenuItem onClick={() => onToggleEnabled(node.id, node.enabled)}>
-            {isDisabled ? <Power className="mr-2 h-3.5 w-3.5" /> : <PowerOff className="mr-2 h-3.5 w-3.5" />}
-            {isDisabled ? "Enable" : "Disable"}
+            {isDisabled ? (
+              <Power className="mr-2 h-3.5 w-3.5" />
+            ) : (
+              <PowerOff className="mr-2 h-3.5 w-3.5" />
+            )}
+            {isDisabled ? 'Enable' : 'Disable'}
          </ContextMenuItem>
          <ContextMenuItem onClick={() => onToggleVisible(node.id, node.visible)}>
-            {isHidden ? <Eye className="mr-2 h-3.5 w-3.5" /> : <EyeOffIcon className="mr-2 h-3.5 w-3.5" />}
-            {isHidden ? "Show" : "Hide"}
+            {isHidden ? (
+              <Eye className="mr-2 h-3.5 w-3.5" />
+            ) : (
+              <EyeOffIcon className="mr-2 h-3.5 w-3.5" />
+            )}
+            {isHidden ? 'Show' : 'Hide'}
          </ContextMenuItem>
          <ContextMenuSeparator />
          <ContextMenuItem
@@ -269,7 +280,7 @@ export const TreeItemContent = React.memo(
          </ContextMenuItem>
        </ContextMenuContent>
      </ContextMenu>
-    );
+    )
  },
  (prev, next) => {
    return (
@@ -287,6 +298,6 @@ export const TreeItemContent = React.memo(
      prev.sortMode === next.sortMode &&
      prev.isLoading === next.isLoading &&
      prev.isDragging === next.isDragging
-    );
+    )
  },
-);
+)