Refactor data editing to hit the API directly, use one form

[eyeseast]

Closes #1275

• New lib/api/kv.ts module to handle common operations, plus tests
• KeyValue.svelte input uses updated event handling to send and receive data
• Items can be added, removed or edited, on one or many documents
• Removes server handling for data editing (which isn't actually a <form> anymore)
• Migrates any components this touches to Svelte 5

This PR will not handle optimistic updates for bulk tagging (#1207). That's going to probably happen as part of #1271.

[netlify]

✅ Deploy Preview for documentcloud-frontend-next ready!

Name	Link
🔨 Latest commit	e5dc83c
🔍 Latest deploy log	https://app.netlify.com/projects/documentcloud-frontend-next/deploys/69825e4870f9640008116c71
😎 Deploy Preview	https://deploy-preview-1276.muckcloud.com
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 55 (🔴 down 7 from production) Accessibility: 0 (no change from production) Best Practices: 92 (no change from production) SEO: 83 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	41.41%	982 / 2371
🔵	Statements	44.7%	1228 / 2747
🔵	Functions	55.73%	350 / 628
🔵	Branches	44.11%	525 / 1190

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
src/lib/api/documents.ts	86.42%	83.07%	94.11%	87.5%	100-110, 182-183, 192, 210-214, 223, 507, 530-532
src/lib/api/kv.ts	100%	100%	100%	100%
src/lib/components/common/Empty.svelte	100%	100%	100%	100%
src/lib/components/common/KV.svelte	100%	100%	100%	100%
src/lib/components/common/Tooltip.svelte	100%	100%	100%	100%
src/lib/components/documents/Data.svelte	0%	100%	0%	0%	72-59
src/lib/components/documents/DocumentListItem.svelte	94.73%	75.67%	83.33%	91.66%	144-143
src/lib/components/documents/tests/EmbedContext.demo.svelte	0%	0%	0%	0%
src/lib/components/forms/EditDataMany.svelte	28.57%	33.33%	14.28%	30%	299-305, 297-313, 311
src/lib/components/inputs/KeyValue.svelte	100%	100%	100%	100%
src/lib/components/layouts/DocumentBrowser.svelte	0%	100%	0%	0%	311-404
src/lib/components/layouts/Toaster.svelte	100%	100%	100%	100%
src/lib/components/sidebar/DocumentActions.svelte	0%	0%	100%	0%	136-205
src/routes/(app)/documents/+page.server.ts	0%	0%	0%	0%	11-118
src/routes/(app)/documents/[id]-[slug]/+page.server.ts	0%	0%	0%	0%	12-257

Generated in workflow #1026 for commit e5dc83c by the Vitest Coverage Report Action

[allanlasser]

Can you speak to the decision to make each row save individually, vs saving all changes when clicking "Done"? I imagine folks might make changes, not click save on each field, and then lose changes when dismissing the editing dialog.

[eyeseast]

A couple reasons:

This is how the API works. There's no bulk endpoint, unless you're replacing the entire data object. Everything happens at the level of a single key, so I want to hit that endpoint and return quickly.

For single documents, it was sort of ok to just replace the whole object, but I didn't like that it worked differently for bulk edits.

For bulk edits, we need to hit each key on each document, so that adds up to a lot of requests. I want to make those batches as small as I can.

[eyeseast]

Made another update: We can now track how many unsaved changes there are in the form and tell the user, so they can save. I also made the icons bigger, just to make things more obvious.

[eyeseast]

One other thing I'm considering: These two forms now operate the same way, except for how many documents they operate on. EditData.svelte handles one, EditDataMany.svelte handles an array. They could probably be combined at this point.

[allanlasser]

This is looking really good. The larger buttons make a difference! A few last pieces of feedback:

1. I hit an error when trying to edit multiple documents at once:

   Uncaught Svelte error: state_unsafe_mutation
   Updating state inside `$derived(...)`, `$inspect(...)` or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
   https://svelte.dev/e/state_unsafe_mutation
   

2. Empty state looks slightly off to me since we have headings but nothing under them. We could either omit the column headers when there's no entries, or show an Empty component with a hint for what to do next.
3. I loved when the "unsaved changes" hint faded in after making a change. Very nice. When I had unsaved changes, I expected an extra warning before closing the editor ("You will lose your unsaved changes. Continue?"). We could show this with something as simple as an alert.
4. When I edited a field but then returned it to its initial state (add a space to the end of a value + then delete it), I expected it to no longer be in a saveable/unsaved state.

[eyeseast]

I think I got everything. Try it out and let me know how it feels.

[allanlasser]

Looking great! Two last things:

1. Good handling on the done button, but missing similar handling when clicking the modal close button or hitting the escape key.

2. Previous feedback needs addressed:

   When I edited a field but then returned it to its initial state (add a space to the end of a value + then delete it), I expected it to no longer be in a saveable/unsaved state.

[eyeseast]

I can't actually fix 1 from within this component. The modal has its own close handler that circumvents this component. And this component's onclose hook really just calls the modal's close handler.

[eyeseast]

Got 2 done now. Misread it as something else (which was also a problem that is now fixed).