feat: drag to reorder sites

package.json

@@ -11,6 +11,10 @@
     "test:e2e": "env-cmd -f .env.test playwright test"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@supabase/ssr": "^0.8.0",
     "@supabase/supabase-js": "^2.96.0",
     "next": "^15.2.0",

src/__tests__/sites-crud.test.ts

@@ -26,7 +26,7 @@ vi.mock("@/lib/supabase/server", () => ({
     }),
 }))
 
-import { addSite, editSite, deleteSite } from "@/app/sites/actions"
+import { addSite, editSite, deleteSite, reorderSites } from "@/app/sites/actions"
 
 describe("addSite action", () => {
   beforeEach(() => {
@@ -49,7 +49,17 @@ describe("addSite action", () => {
     })
 
     const mockInsert = vi.fn().mockReturnValue({ error: null })
-    mockFrom.mockReturnValue({ insert: mockInsert })
+    const mockSingle = vi.fn().mockResolvedValue({ data: { position: 2 } })
+    const mockLimit = vi.fn().mockReturnValue({ single: mockSingle })
+    const mockOrder = vi.fn().mockReturnValue({ limit: mockLimit })
+    const mockSelect = vi.fn().mockReturnValue({ order: mockOrder })
+    mockFrom.mockImplementation((table: string) => {
+      // First call: select max position; second call: insert
+      if (mockFrom.mock.calls.length <= 1) {
+        return { select: mockSelect }
+      }
+      return { insert: mockInsert }
+    })
 
     const formData = new FormData()
     formData.set("name", "Test Site")
@@ -60,6 +70,7 @@ describe("addSite action", () => {
     expect(mockInsert).toHaveBeenCalledWith({
       name: "Test Site",
       url: "https://example.com",
+      position: 3,
     })
   })
 
@@ -154,3 +165,36 @@ describe("deleteSite action", () => {
     expect(mockEq).toHaveBeenCalledWith("id", "site-1")
   })
 })
+
+describe("reorderSites action", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  test("redirects unauthenticated users to login", async () => {
+    mockGetUser.mockResolvedValue({ data: { user: null } })
+
+    await expect(reorderSites(["a", "b"])).rejects.toThrow(
+      "NEXT_REDIRECT:/login"
+    )
+  })
+
+  test("updates positions for authenticated users", async () => {
+    mockGetUser.mockResolvedValue({
+      data: { user: { id: "user-1" } },
+    })
+
+    const mockEq = vi.fn().mockReturnValue({ error: null })
+    const mockUpdate = vi.fn().mockReturnValue({ eq: mockEq })
+    mockFrom.mockReturnValue({ update: mockUpdate })
+
+    await reorderSites(["site-b", "site-a", "site-c"])
+    expect(mockFrom).toHaveBeenCalledWith("sites")
+    expect(mockUpdate).toHaveBeenCalledWith({ position: 0 })
+    expect(mockUpdate).toHaveBeenCalledWith({ position: 1 })
+    expect(mockUpdate).toHaveBeenCalledWith({ position: 2 })
+    expect(mockEq).toHaveBeenCalledWith("id", "site-b")
+    expect(mockEq).toHaveBeenCalledWith("id", "site-a")
+    expect(mockEq).toHaveBeenCalledWith("id", "site-c")
+  })
+})

src/app/page.tsx

@@ -1,9 +1,8 @@
 import Link from "next/link"
 import { createClient } from "@/lib/supabase/server"
 import type { Site, Check, Incident } from "@/lib/supabase/types"
-import { formatTimeAgo, formatDuration } from "@/lib/format"
-import AddSiteCard from "@/components/AddSiteCard"
-import SiteFormDialog from "@/components/SiteFormDialog"
+import { formatDuration } from "@/lib/format"
+import SiteList from "@/components/SiteList"
 import RealtimeStatusPage from "@/components/RealtimeStatusPage"
 
 export const revalidate = 0
@@ -17,7 +16,7 @@ async function getStatusData() {
   const { data: sites } = await supabase
     .from("sites")
     .select("*")
-    .order("name")
+    .order("position")
 
   const { data: openIncidents } = await supabase
     .from("incidents")
@@ -127,103 +126,7 @@ export default async function StatusPage() {
           Sites
         </h2>
 
-        {sites.length === 0 && !isAdmin ? (
-          <p className="text-sm" style={{ color: "#5C5C5C" }}>
-            No sites are being monitored yet.
-          </p>
-        ) : (
-          <div className="flex flex-col gap-3">
-            {sites.map((site) => (
-              <div
-                key={site.id}
-                className="group relative"
-                style={{
-                  backgroundColor: "#FFFFFF",
-                  border: "1px solid #E8E4DF",
-                  borderRadius: "4px",
-                  padding: "14px 18px",
-                }}
-              >
-                <Link
-                  href={`/sites/${site.id}`}
-                  className="absolute inset-0 z-0"
-                  aria-label={site.name}
-                />
-                <div className="flex items-center gap-3 flex-wrap">
-                  <div className="flex items-center gap-2.5 min-w-0">
-                    <span
-                      className="w-2 h-2 rounded-full shrink-0"
-                      style={{
-                        backgroundColor:
-                          site.lastCheck?.status === "failure"
-                            ? "#C4453C"
-                            : "#2DA44E",
-                      }}
-                    />
-                    <span
-                      className="text-sm font-bold"
-                      style={{ color: "#1A1A1A" }}
-                    >
-                      {site.name}
-                    </span>
-                  </div>
-                  <span
-                    className="text-xs"
-                    style={{ color: "#5C5C5C" }}
-                  >
-                    {site.url}
-                  </span>
-                  {isAdmin && (
-                    <div className="relative z-10">
-                      <SiteFormDialog
-                        mode="edit"
-                        siteId={site.id}
-                        name={site.name}
-                        url={site.url}
-                        trigger={
-                          <button
-                            className="flex items-center justify-center rounded cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0"
-                            style={{
-                              width: "28px",
-                              height: "28px",
-                              color: "#5C5C5C",
-                              background: "transparent",
-                              border: "none",
-                            }}
-                            title="Edit site"
-                          >
-                            <svg
-                              width="14"
-                              height="14"
-                              viewBox="0 0 16 16"
-                              fill="none"
-                              stroke="currentColor"
-                              strokeWidth="1.5"
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                            >
-                              <path d="M11.5 1.5l3 3-9 9H2.5v-3z" />
-                              <path d="M10 3l3 3" />
-                            </svg>
-                          </button>
-                        }
-                      />
-                    </div>
-                  )}
-                  <span
-                    className="ml-auto text-[11px] shrink-0"
-                    style={{ color: "#8A8A8A", letterSpacing: "0.01em" }}
-                  >
-                    {site.lastCheck
-                      ? `Checked ${formatTimeAgo(site.lastCheck.checked_at)}`
-                      : "No checks yet"}
-                  </span>
-                </div>
-              </div>
-            ))}
-            {isAdmin && <AddSiteCard />}
-          </div>
-        )}
+        <SiteList sites={sites} isAdmin={isAdmin} />
       </section>
     </main>
   )

src/app/sites/actions.ts

@@ -17,7 +17,16 @@ export async function addSite(formData: FormData) {
 
   if (!name || !url) return
 
-  await supabase.from("sites").insert({ name, url })
+  const { data: maxRow } = await supabase
+    .from("sites")
+    .select("position")
+    .order("position", { ascending: false })
+    .limit(1)
+    .single()
+
+  const position = (maxRow?.position ?? -1) + 1
+
+  await supabase.from("sites").insert({ name, url, position })
   revalidatePath("/")
 }
 
@@ -50,3 +59,21 @@ export async function deleteSite(siteId: string) {
   await supabase.from("sites").delete().eq("id", siteId)
   revalidatePath("/")
 }
+
+export async function reorderSites(orderedIds: string[]) {
+  const supabase = await createClient()
+  const {
+    data: { user },
+  } = await supabase.auth.getUser()
+
+  if (!user) redirect("/login")
+
+  for (let i = 0; i < orderedIds.length; i++) {
+    await supabase
+      .from("sites")
+      .update({ position: i })
+      .eq("id", orderedIds[i])
+  }
+
+  revalidatePath("/")
+}