npm update; multiple methods

Author: MoritzLoewenstein

package-lock.json

@@ -21,42 +21,43 @@
 		"start:prod": "prisma migrate deploy && node server.js"
 	},
 	"devDependencies": {
-		"@eslint/compat": "^2.0.2",
+		"@eslint/compat": "^2.1.0",
 		"@eslint/js": "^9.18.0",
-		"@sveltejs/adapter-node": "^5.5.2",
-		"@sveltejs/kit": "^2.50.1",
+		"@sveltejs/adapter-node": "^5.5.4",
+		"@sveltejs/kit": "^2.60.1",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
 		"@types/better-sqlite3": "^7.6.13",
 		"@types/jsdom": "^27.0.0",
-		"@types/node": "^24.10.9",
+		"@types/node": "^24.12.4",
 		"@vitest/browser-playwright": "^4.0.6",
 		"@vitest/ui": "^4.0.6",
-		"eslint": "^9.39.2",
+		"eslint": "^9.39.4",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.14.0",
-		"globals": "^17.2.0",
-		"prettier": "^3.8.1",
+		"eslint-plugin-svelte": "^3.17.1",
+		"globals": "^17.6.0",
+		"prettier": "^3.8.3",
 		"prettier-plugin-prisma": "^5.0.0",
-		"prettier-plugin-svelte": "^3.4.1",
-		"svelte": "^5.49.1",
-		"svelte-check": "^4.3.5",
-		"typescript": "^5.9.3",
-		"typescript-eslint": "^8.54.0",
-		"vite": "^7.3.1",
+		"prettier-plugin-svelte": "^3.5.2",
+		"prisma-json-types-generator": "^5.0.0",
+		"svelte": "^5.55.7",
+		"svelte-check": "^4.4.8",
+		"typescript": "^6.0.3",
+		"typescript-eslint": "^8.59.3",
+		"vite": "^7.3.3",
 		"vitest": "^4.0.6",
-		"vitest-browser-svelte": "^2.0.2"
+		"vitest-browser-svelte": "^2.1.1"
 	},
 	"dependencies": {
-		"@prisma/adapter-better-sqlite3": "^7.3.0",
-		"@prisma/client": "^7.3.0",
+		"@prisma/adapter-better-sqlite3": "^7.8.0",
+		"@prisma/client": "^7.8.0",
 		"argon2": "^0.44.0",
-		"better-sqlite3": "^12.6.2",
-		"prisma": "^7.3.0",
+		"better-sqlite3": "^12.10.0",
+		"prisma": "^7.8.0",
 		"socket.io": "^4.8.3",
 		"socket.io-client": "^4.8.3",
 		"ulid": "^3.0.2",
-		"valibot": "^1.2.0",
-		"zod": "^4.3.6"
+		"valibot": "^1.4.0",
+		"zod": "^4.4.3"
 	},
 	"volta": {
 		"node": "24.11.1"

package.json

@@ -0,0 +1,22 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `method` on the `webhook_endpoints` table. All the data in the column will be lost.
+
+*/
+-- RedefineTables
+PRAGMA defer_foreign_keys=ON;
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_webhook_endpoints" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "user_id" TEXT NOT NULL,
+    "target" TEXT NOT NULL,
+    "methods" JSONB NOT NULL DEFAULT [],
+    "created_at" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    CONSTRAINT "webhook_endpoints_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users" ("id") ON DELETE CASCADE ON UPDATE CASCADE
+);
+INSERT INTO "new_webhook_endpoints" ("created_at", "id", "target", "user_id") SELECT "created_at", "id", "target", "user_id" FROM "webhook_endpoints";
+DROP TABLE "webhook_endpoints";
+ALTER TABLE "new_webhook_endpoints" RENAME TO "webhook_endpoints";
+PRAGMA foreign_keys=ON;
+PRAGMA defer_foreign_keys=OFF;

prisma/migrations/20260517192231_methods_multi/migration.sql

@@ -3,6 +3,10 @@ generator client {
   output   = "../generated/prisma/"
 }
 
+generator json {
+  provider = "prisma-json-types-generator"
+}
+
 datasource db {
   provider = "sqlite"
 }
@@ -59,7 +63,8 @@ model WebhookEndpoint {
   id        String   @id
   userId    String   @map("user_id")
   target    String
-  method    String
+  /// [WebhookEndpointMethods]
+  methods   Json     @default("[]")
   createdAt DateTime @default(now()) @map("created_at")
 
   user User @relation(fields: [userId], references: [id], onDelete: Cascade)

prisma/schema.prisma

@@ -3,7 +3,7 @@
 	import CloseIcon from '../icons/CloseIcon.svelte';
 	import { updateEndpoint } from '../../routes/webhooks.remote.js';
 	import type { Endpoint } from '../shared/types.js';
-	import { HTTP_METHODS } from '../constants';
+	import { HTTP_METHODS, type HttpMethod } from '../constants';
 
 	let { onendpointUpdated = () => {} } = $props<{
 		onendpointUpdated?: (endpoint: Endpoint) => void;
@@ -12,7 +12,7 @@
 	let dialog: HTMLDialogElement;
 	let loading = $state(false);
 	let editTarget = $state('');
-	let editMethod = $state('');
+	let editMethods = $state<HttpMethod[]>([]);
 	let currentEndpoint = $state<Endpoint | null>(null);
 
 	$effect(() => {
@@ -26,15 +26,23 @@
 	export function openModal(endpoint: Endpoint) {
 		currentEndpoint = endpoint;
 		editTarget = endpoint.target;
-		editMethod = endpoint.method;
+		editMethods = [...endpoint.methods];
 		view.set(VIEW.EDIT_WEBHOOK);
 	}
 
 	function closeModal() {
 		view.set(VIEW.LANDING);
 		currentEndpoint = null;
 		editTarget = '';
-		editMethod = '';
+		editMethods = [];
+	}
+
+	function toggleMethod(method: HttpMethod) {
+		if (editMethods.includes(method)) {
+			editMethods = editMethods.filter((m) => m !== method);
+		} else {
+			editMethods = [...editMethods, method];
+		}
 	}
 
 	async function handleSave() {
@@ -44,7 +52,7 @@
 			const updated = await updateEndpoint({
 				id: currentEndpoint.id,
 				target: editTarget,
-				method: editMethod
+				methods: editMethods
 			});
 			onendpointUpdated(updated);
 			closeModal();
@@ -64,29 +72,32 @@
 		<h1>webhook edit</h1>
 		{#if currentEndpoint}
 			<label>
-				target url
+				<span>target url</span>
 				<input
 					type="text"
 					bind:value={editTarget}
 					placeholder="http://localhost:3000/api/webhook"
-				/>
-			</label>
+				/></label
+			>
+
 			<div class="method-label">
-				<p>http method</p>
+				<p>http method(s)</p>
 				<div class="method-buttons">
 					{#each HTTP_METHODS as method (method)}
-						{#if method !== editMethod}
-							<button type="button" class="btn-secondary" onclick={() => (editMethod = method)}>
-								{method}
-							</button>
-						{:else}
-							<p class="btn">{editMethod}</p>
-						{/if}
+						{@const selected = editMethods.includes(method)}
+						<button
+							type="button"
+							class:btn-secondary={!selected}
+							class:btn={selected}
+							onclick={() => toggleMethod(method)}
+						>
+							{method}
+						</button>
 					{/each}
 				</div>
 			</div>
 			<div class="modal-buttons">
-				<button onclick={handleSave} disabled={loading}>Save</button>
+				<button onclick={handleSave} disabled={loading || editMethods.length === 0}>Save</button>
 				<button class="btn-secondary" onclick={closeModal}>Cancel</button>
 			</div>
 		{/if}
@@ -124,13 +135,17 @@
 		font-size: 14px;
 	}
 
+	label span,
+	.method-label p {
+		margin-bottom: 0.25rem;
+	}
+
 	.method-buttons {
 		display: flex;
 		justify-content: space-between;
 		gap: 0.5rem;
 	}
 
-	.method-buttons p.btn,
 	button {
 		box-sizing: border-box;
 		font-size: 14px;

src/lib/components/EndpointEditModal.svelte

@@ -12,7 +12,7 @@
 
 <li>
 	<span>{endpoint.url}</span>
-	<span class="method">{endpoint.method}</span>
+	<span class="method">{endpoint.methods.join(', ')}</span>
 	<span class="target">→ {endpoint.target}</span>
 	<button class="btn-secondary" onclick={() => navigator.clipboard.writeText(endpoint.url)}
 		>Copy URL</button
@@ -38,7 +38,7 @@
 		& .method {
 			font-weight: bold;
 			color: var(--turqoise);
-			width: 4.5ch;
+			white-space: nowrap;
 		}
 
 		& .target {

src/lib/components/EndpointListItem.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { HTTP_METHODS } from '../constants';
+	import { HTTP_METHODS, type HttpMethod } from '../constants';
 
 	interface Props {
-		value: string;
-		onchange: (value: string) => void;
+		value: HttpMethod[];
+		onchange: (value: HttpMethod[]) => void;
 	}
 
 	let { value = $bindable(), onchange }: Props = $props();
@@ -14,10 +14,13 @@
 		isOpen = !isOpen;
 	}
 
-	function selectMethod(method: string) {
-		value = method;
-		isOpen = false;
-		onchange(method);
+	function toggleMethod(method: HttpMethod) {
+		if (value.includes(method)) {
+			value = value.filter((m) => m !== method);
+		} else {
+			value = [...value, method];
+		}
+		onchange(value);
 	}
 
 	function handleClickOutside(event: MouseEvent) {
@@ -26,26 +29,39 @@
 			isOpen = false;
 		}
 	}
+
+	let triggerLabel = $derived.by(() => {
+		if (value.length === 0) return 'Select methods';
+		if (value.length === HTTP_METHODS.length) return 'All methods';
+		return value.join(', ');
+	});
 </script>
 
 <svelte:window onclick={handleClickOutside} />
 
 <div class="dropdown">
 	<button type="button" class="dropdown-trigger" onclick={toggleDropdown}>
-		{value}
+		<span class="label">{triggerLabel}</span>
 		<span class="arrow" class:open={isOpen}>▼</span>
 	</button>
 
 	{#if isOpen}
 		<ul class="dropdown-menu">
 			{#each HTTP_METHODS as method (method)}
+				{@const selected = value.includes(method)}
 				<li>
 					<button
 						type="button"
 						class="dropdown-item"
-						class:selected={method === value}
-						onclick={() => selectMethod(method)}
+						class:selected
+						onclick={() => toggleMethod(method)}
 					>
+						<input
+							type="checkbox"
+							checked={selected}
+							tabindex="-1"
+							onclick={(event) => event.preventDefault()}
+						/>
 						{method}
 					</button>
 				</li>
@@ -71,7 +87,7 @@
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
-		min-width: 120px;
+		min-width: 160px;
 		justify-content: space-between;
 		transition: var(--color-transition);
 	}
@@ -81,6 +97,12 @@
 		color: var(--offwhite);
 	}
 
+	.label {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
 	.arrow {
 		font-size: 0.7em;
 		transition: transform 0.2s ease-out;
@@ -114,6 +136,9 @@
 		width: 100%;
 		text-align: left;
 		cursor: pointer;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
 		transition: var(--color-transition);
 	}
 
@@ -126,4 +151,9 @@
 		background-color: var(--blue);
 		color: var(--offwhite);
 	}
+
+	.dropdown-item input[type='checkbox'] {
+		pointer-events: none;
+		accent-color: var(--blue);
+	}
 </style>

src/lib/components/MethodDropdown.svelte

@@ -1 +1,2 @@
 export const HTTP_METHODS = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'] as const;
+export type HttpMethod = (typeof HTTP_METHODS)[number];