refactor: update Docker base images, enhance image upload security, and implement shared form client logic and validation

2026-08-01 15:57:55 +07:00
parent e243a75d33
commit b557879928
14 changed files with 505 additions and 318 deletions
@@ -0,0 +1,96 @@
+"use client";
+
+import type React from "react";
+import { AlertCircle, Check, GripVertical, Loader2 } from "lucide-react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Button } from "@/components/ui/button";
+import type { AutoSaveStatus } from "@/hooks/use-debounced-autosave";
+
+export function SaveStatusIndicator({
+  status,
+  error,
+  onRetry,
+}: {
+  status: AutoSaveStatus;
+  error: string | null;
+  onRetry: () => Promise<void>;
+}) {
+  if (status === "clean") return null;
+
+  return (
+    <span className="flex items-center gap-1.5 text-xs text-muted-foreground" aria-live="polite">
+      {status === "dirty" && "Unsaved"}
+      {status === "saving" && (
+        <>
+          <Loader2 className="animate-spin" />
+          Saving
+        </>
+      )}
+      {status === "saved" && (
+        <>
+          <Check />
+          Saved
+        </>
+      )}
+      {status === "error" && (
+        <>
+          <AlertCircle />
+          <span>{error || "Could not save."}</span>
+          <Button
+            variant="link"
+            size="sm"
+            className="h-auto px-1"
+            onClick={() => void onRetry().catch(() => undefined)}
+          >
+            Retry
+          </Button>
+        </>
+      )}
+    </span>
+  );
+}
+
+export function SortableQuestion({
+  id,
+  position,
+  children,
+}: {
+  id: string;
+  position: number;
+  children: React.ReactNode;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id });
+
+  return (
+    <div
+      ref={setNodeRef}
+      className="relative"
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.6 : 1,
+      }}
+    >
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className="absolute left-2 top-4"
+        aria-label={`Drag question ${position} to reorder`}
+        {...attributes}
+        {...listeners}
+      >
+        <GripVertical />
+      </Button>
+      {children}
+    </div>
+  );
+}