use checkboxes instead of inputs for sync modal

frontend/src/features/slices/sync/handlers.tsx

···
 
   try {
     const formData = await req.formData();
-    const collectionsText = (formData.get("collections") as string) || "";
-    const externalCollectionsText =
-      (formData.get("external_collections") as string) || "";
+    const collections = formData.getAll("collections") as string[];
+    const externalCollections = formData.getAll("external_collections") as string[];
     const reposText = (formData.get("repos") as string) || "";
-
-    const collections = collectionsText
-      .split("\n")
-      .map((line) => line.trim())
-      .filter((line) => line.length > 0);
-
-    const externalCollections = externalCollectionsText
-      .split("\n")
-      .map((line) => line.trim())
-      .filter((line) => line.length > 0);
 
     const repos = reposText
       .split("\n")

frontend/src/features/slices/sync/templates/fragments/SyncFormModal.tsx

···
 import { Button } from "../../../../../shared/fragments/Button.tsx";
 import { Textarea } from "../../../../../shared/fragments/Textarea.tsx";
+import { Checkbox } from "../../../../../shared/fragments/Checkbox.tsx";
 import { Modal } from "../../../../../shared/fragments/Modal.tsx";
 
 interface SyncFormModalProps {
···
         hx-swap="innerHTML"
         className="space-y-4"
       >
-        <Textarea
-          id="collections"
-          name="collections"
-          label="Primary Collections"
-          rows={4}
-          placeholder={collections.length > 0
-            ? "Primary collections (matching your slice domain) loaded below:"
-            : "Enter primary collections matching your slice domain, one per line:\n\nyour.domain.collection\nyour.domain.post"}
-          defaultValue={collections.length > 0 ? collections.join("\n") : ""}
-        />
-        <p className="mt-1 text-xs text-zinc-500">
-          Primary collections are those that match your slice's domain.
-        </p>
+        <div className="space-y-2">
+          <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
+            Primary Collections
+          </label>
+          <p className="text-xs text-zinc-500">
+            Primary collections are those that match your slice's domain.
+          </p>
+          {collections.length > 0 ? (
+            <div className="space-y-2 border border-zinc-200 dark:border-zinc-700 rounded-md p-4 bg-white dark:bg-zinc-900">
+              {collections.map((collection) => (
+                <Checkbox
+                  key={collection}
+                  name="collections"
+                  value={collection}
+                  label={collection}
+                  checked
+                />
+              ))}
+            </div>
+          ) : (
+            <p className="text-sm text-zinc-500 italic">No primary collections available</p>
+          )}
+        </div>
 
-        <Textarea
-          id="external_collections"
-          name="external_collections"
-          label="External Collections"
-          rows={4}
-          placeholder={externalCollections.length > 0
-            ? "External collections loaded below:"
-            : "Enter external collections (not matching your domain), one per line:\n\napp.bsky.feed.post\napp.bsky.actor.profile"}
-          defaultValue={externalCollections.length > 0
-            ? externalCollections.join("\n")
-            : ""}
-        />
-        <p className="mt-1 text-xs text-zinc-500">
-          External collections are those that don't match your slice's domain.
-        </p>
+        <div className="space-y-2">
+          <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
+            External Collections
+          </label>
+          <p className="text-xs text-zinc-500">
+            External collections are those that don't match your slice's domain.
+          </p>
+          {externalCollections.length > 0 ? (
+            <div className="space-y-2 border border-zinc-200 dark:border-zinc-700 rounded-md p-4 bg-white dark:bg-zinc-900">
+              {externalCollections.map((collection) => (
+                <Checkbox
+                  key={collection}
+                  name="external_collections"
+                  value={collection}
+                  label={collection}
+                  checked
+                />
+              ))}
+            </div>
+          ) : (
+            <p className="text-sm text-zinc-500 italic">No external collections available</p>
+          )}
+        </div>
 
         <Textarea
           id="repos"

frontend/src/shared/fragments/Checkbox.tsx

···
+import type { JSX } from "preact";
+import { cn } from "../../utils/cn.ts";
+
+export type CheckboxProps = JSX.IntrinsicElements["input"] & {
+  label?: string;
+};
+
+export function Checkbox(props: CheckboxProps): JSX.Element {
+  const { class: classProp, label, ...rest } = props;
+
+  const className = cn("accent-blue-600 dark:accent-white", classProp);
+
+  return (
+    <label className="flex items-center gap-2 cursor-pointer">
+      <input
+        type="checkbox"
+        class={className}
+        style="color-scheme: light dark;"
+        {...rest}
+      />
+      {label && (
+        <span className="text-sm text-zinc-700 dark:text-zinc-300">
+          {label}
+        </span>
+      )}
+    </label>
+  );
+}