feat: complete stage 2 core refactor

src/components/providers/ProviderList.tsx

@@ -0,0 +1,153 @@
+import { CSS } from "@dnd-kit/utilities";
+import {
+  DndContext,
+  closestCenter,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import type { CSSProperties } from "react";
+import type { Provider } from "@/types";
+import type { AppType } from "@/lib/api";
+import { useDragSort } from "@/hooks/useDragSort";
+import { ProviderCard } from "@/components/providers/ProviderCard";
+import { ProviderEmptyState } from "@/components/providers/ProviderEmptyState";
+
+interface ProviderListProps {
+  providers: Record<string, Provider>;
+  currentProviderId: string;
+  appType: AppType;
+  onSwitch: (provider: Provider) => void;
+  onEdit: (provider: Provider) => void;
+  onDelete: (provider: Provider) => void;
+  onConfigureUsage?: (provider: Provider) => void;
+  onOpenWebsite: (url: string) => void;
+  onCreate?: () => void;
+  isLoading?: boolean;
+}
+
+export function ProviderList({
+  providers,
+  currentProviderId,
+  appType,
+  onSwitch,
+  onEdit,
+  onDelete,
+  onConfigureUsage,
+  onOpenWebsite,
+  onCreate,
+  isLoading = false,
+}: ProviderListProps) {
+  const { sortedProviders, sensors, handleDragEnd } = useDragSort(
+    providers,
+    appType,
+  );
+
+  if (isLoading) {
+    return (
+      <div className="space-y-3">
+        {[0, 1, 2].map((index) => (
+          <div
+            key={index}
+            className="h-28 w-full rounded-lg border border-dashed border-muted-foreground/40 bg-muted/40"
+          />
+        ))}
+      </div>
+    );
+  }
+
+  if (sortedProviders.length === 0) {
+    return <ProviderEmptyState onCreate={onCreate} />;
+  }
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragEnd={handleDragEnd}
+    >
+      <SortableContext
+        items={sortedProviders.map((provider) => provider.id)}
+        strategy={verticalListSortingStrategy}
+      >
+        <div className="space-y-3">
+          {sortedProviders.map((provider) => (
+            <SortableProviderCard
+              key={provider.id}
+              provider={provider}
+              isCurrent={provider.id === currentProviderId}
+              appType={appType}
+              onSwitch={onSwitch}
+              onEdit={onEdit}
+              onDelete={onDelete}
+              onConfigureUsage={onConfigureUsage}
+              onOpenWebsite={onOpenWebsite}
+            />
+          ))}
+        </div>
+      </SortableContext>
+    </DndContext>
+  );
+}
+
+interface SortableProviderCardProps {
+  provider: Provider;
+  isCurrent: boolean;
+  appType: AppType;
+  onSwitch: (provider: Provider) => void;
+  onEdit: (provider: Provider) => void;
+  onDelete: (provider: Provider) => void;
+  onConfigureUsage?: (provider: Provider) => void;
+  onOpenWebsite: (url: string) => void;
+}
+
+function SortableProviderCard({
+  provider,
+  isCurrent,
+  appType,
+  onSwitch,
+  onEdit,
+  onDelete,
+  onConfigureUsage,
+  onOpenWebsite,
+}: SortableProviderCardProps) {
+  const {
+    setNodeRef,
+    attributes,
+    listeners,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: provider.id });
+
+  const style: CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style}>
+      <ProviderCard
+        provider={provider}
+        isCurrent={isCurrent}
+        appType={appType}
+        onSwitch={onSwitch}
+        onEdit={onEdit}
+        onDelete={onDelete}
+        onConfigureUsage={
+          onConfigureUsage
+            ? (item) => onConfigureUsage(item)
+            : () => undefined
+        }
+        onOpenWebsite={onOpenWebsite}
+        dragHandleProps={{
+          attributes,
+          listeners,
+          isDragging,
+        }}
+      />
+    </div>
+  );
+}