Import source: src/components/features/favorite-tools-dnd

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.

src/components/features/favorite-tools-dnd.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import { useState } from "react";
+import { DndContext, type DragEndEvent } from "@dnd-kit/core";
+import {
+  SortableContext,
+  arrayMove,
+  rectSortingStrategy,
+  useSortable,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Star } from "lucide-react";
+import Link from "next/link";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { routeItems } from "@/lib/routes";
+import { cn } from "@/lib/utils";
+
+type Tool = (typeof routeItems)[number];
+
+export function FavoriteToolsDnd({
+  favorites,
+  onToggleFavorite,
+}: {
+  favorites: string[];
+  onToggleFavorite: (path: string) => void;
+}) {
+  const [order, setOrder] = useState<string[]>([]);
+  const orderedFavorites = [
+    ...order.filter((path) => favorites.includes(path)),
+    ...favorites.filter((path) => !order.includes(path)),
+  ];
+
+  function onDragEnd(event: DragEndEvent) {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    setOrder(
+      arrayMove(
+        orderedFavorites,
+        orderedFavorites.indexOf(String(active.id)),
+        orderedFavorites.indexOf(String(over.id)),
+      ),
+    );
+  }
+
+  return (
+    <DndContext onDragEnd={onDragEnd}>
+      <SortableContext items={orderedFavorites} strategy={rectSortingStrategy}>
+        <div className="grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
+          {orderedFavorites
+            .map((path) => routeItems.find((item) => item.path === path))
+            .filter((item): item is Tool => Boolean(item))
+            .map((tool) => (
+              <SortableTool
+                key={tool.path}
+                tool={tool}
+                favorite={favorites.includes(tool.path)}
+                onToggleFavorite={() => onToggleFavorite(tool.path)}
+              />
+            ))}
+        </div>
+      </SortableContext>
+    </DndContext>
+  );
+}
+
+function SortableTool({
+  tool,
+  favorite,
+  onToggleFavorite,
+}: {
+  tool: Tool;
+  favorite: boolean;
+  onToggleFavorite: () => void;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+    id: tool.path,
+  });
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{ transform: CSS.Transform.toString(transform), transition }}
+      {...attributes}
+      {...listeners}
+    >
+      <ToolCard tool={tool} favorite={favorite} onToggleFavorite={onToggleFavorite} compact />
+    </div>
+  );
+}
+
+function ToolCard({
+  tool,
+  favorite,
+  compact,
+  onToggleFavorite,
+}: {
+  tool: Tool;
+  favorite: boolean;
+  compact?: boolean;
+  onToggleFavorite: () => void;
+}) {
+  const Icon = tool.icon;
+  return (
+    <Card
+      className={cn(
+        "rounded-md transition-colors duration-150 hover:border-primary/50",
+        compact && "shadow-none",
+      )}
+    >
+      <CardContent
+        className={cn("flex gap-3 p-2", compact ? "items-center" : "min-h-24 flex-col")}
+      >
+        <div className="flex items-start justify-between gap-3">
+          <Link href={tool.path} className="flex min-w-0 flex-1 items-center gap-2">
+            <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
+              <Icon className="h-5 w-5" />
+            </span>
+            <span className="min-w-0">
+              <span className="block truncate text-sm font-semibold">{tool.label}</span>
+              <span className="line-clamp-2 text-xs text-muted-foreground">
+                {tool.description}
+              </span>
+            </span>
+          </Link>
+          <Button
+            size="icon"
+            variant="ghost"
+            onClick={onToggleFavorite}
+            aria-label={`Favorite ${tool.label}`}
+            className="h-7 w-7 rounded-md"
+          >
+            <Star className={cn("h-4 w-4", favorite && "fill-accent text-accent")} />
+          </Button>
+        </div>
+        {!compact ? (
+          <div className="mt-auto flex items-center gap-2">
+            <Badge variant="outline">{tool.category}</Badge>
+            <Badge variant={tool.danger ? "warning" : "success"}>
+              {tool.danger ? "confirmation" : "allowed"}
+            </Badge>
+          </div>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}