Add personal bookmarks CRUD on links page

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/routes/(app)/companies/[companyId]/links/+page.server.ts

@@ -304,5 +304,166 @@ export const actions: Actions = {
 		});
 
 		return { success: true, action: 'reorderCompanyLinks' };
+	},
+
+	addPersonalLink: async ({ request, locals, params }) => {
+		const { user } = await requireCompanyRoleAny(locals, params.companyId, [
+			'admin',
+			'manager',
+			'user',
+			'viewer',
+			'hr',
+			'accountant'
+		]);
+		const fd = await request.formData();
+		const { title, url, category, customLabel, description } = extractFields(fd);
+
+		if (!title) return fail(400, { action: 'addPersonalLink', error: 'Title is required' });
+		if (!category) return fail(400, { action: 'addPersonalLink', error: 'Invalid category' });
+		if (!url) return fail(400, { action: 'addPersonalLink', error: 'URL is required' });
+
+		let validUrl: string;
+		try {
+			validUrl = validateLinkUrl(url);
+		} catch (err) {
+			const msg = err instanceof InvalidLinkUrlError ? err.message : 'Invalid URL';
+			return fail(400, { action: 'addPersonalLink', error: msg });
+		}
+
+		const sortOrder = await nextSortOrder(userCompanyLinks, {
+			userId: user.id,
+			companyId: params.companyId,
+			category
+		});
+
+		await db.insert(userCompanyLinks).values({
+			userId: user.id,
+			companyId: params.companyId,
+			category,
+			customLabel,
+			title,
+			url: validUrl,
+			description,
+			sortOrder
+		});
+
+		return { success: true, action: 'addPersonalLink' };
+	},
+
+	updatePersonalLink: async ({ request, locals, params }) => {
+		const { user } = await requireCompanyRoleAny(locals, params.companyId, [
+			'admin',
+			'manager',
+			'user',
+			'viewer',
+			'hr',
+			'accountant'
+		]);
+		const fd = await request.formData();
+		const id = trimOrNull(fd.get('id'));
+		if (!id) return fail(400, { action: 'updatePersonalLink', error: 'Link id is required' });
+
+		const [existing] = await db
+			.select()
+			.from(userCompanyLinks)
+			.where(
+				and(
+					eq(userCompanyLinks.id, id),
+					eq(userCompanyLinks.userId, user.id),
+					eq(userCompanyLinks.companyId, params.companyId)
+				)
+			)
+			.limit(1);
+		if (!existing) error(404, 'Link not found');
+
+		const { title, url, category, customLabel, description } = extractFields(fd);
+		if (!title) return fail(400, { action: 'updatePersonalLink', error: 'Title is required' });
+		if (!category) return fail(400, { action: 'updatePersonalLink', error: 'Invalid category' });
+		if (!url) return fail(400, { action: 'updatePersonalLink', error: 'URL is required' });
+
+		let validUrl: string;
+		try {
+			validUrl = validateLinkUrl(url);
+		} catch (err) {
+			const msg = err instanceof InvalidLinkUrlError ? err.message : 'Invalid URL';
+			return fail(400, { action: 'updatePersonalLink', error: msg });
+		}
+
+		const urlChanged = validUrl !== existing.url;
+		await db
+			.update(userCompanyLinks)
+			.set({
+				title,
+				url: validUrl,
+				category,
+				customLabel,
+				description,
+				faviconUrl: urlChanged ? null : existing.faviconUrl,
+				faviconFetchedAt: urlChanged ? null : existing.faviconFetchedAt,
+				updatedAt: new Date()
+			})
+			.where(eq(userCompanyLinks.id, id));
+
+		return { success: true, action: 'updatePersonalLink' };
+	},
+
+	deletePersonalLink: async ({ request, locals, params }) => {
+		const { user } = await requireCompanyRoleAny(locals, params.companyId, [
+			'admin',
+			'manager',
+			'user',
+			'viewer',
+			'hr',
+			'accountant'
+		]);
+		const fd = await request.formData();
+		const id = trimOrNull(fd.get('id'));
+		if (!id) return fail(400, { action: 'deletePersonalLink', error: 'Link id is required' });
+
+		const result = await db
+			.delete(userCompanyLinks)
+			.where(
+				and(
+					eq(userCompanyLinks.id, id),
+					eq(userCompanyLinks.userId, user.id),
+					eq(userCompanyLinks.companyId, params.companyId)
+				)
+			)
+			.returning({ id: userCompanyLinks.id });
+
+		if (result.length === 0) error(404, 'Link not found');
+
+		return { success: true, action: 'deletePersonalLink' };
+	},
+
+	reorderPersonalLinks: async ({ request, locals, params }) => {
+		const { user } = await requireCompanyRoleAny(locals, params.companyId, [
+			'admin',
+			'manager',
+			'user',
+			'viewer',
+			'hr',
+			'accountant'
+		]);
+		const fd = await request.formData();
+		const payload = parseOrderPayload(fd.get('orders'));
+		if (!payload) return fail(400, { action: 'reorderPersonalLinks', error: 'Invalid order payload' });
+
+		await db.transaction(async (tx) => {
+			for (const { id, sortOrder } of payload) {
+				await tx
+					.update(userCompanyLinks)
+					.set({ sortOrder, updatedAt: new Date() })
+					.where(
+						and(
+							eq(userCompanyLinks.id, id),
+							eq(userCompanyLinks.userId, user.id),
+							eq(userCompanyLinks.companyId, params.companyId)
+						)
+					);
+			}
+		});
+
+		return { success: true, action: 'reorderPersonalLinks' };
 	}
 };

src/routes/(app)/companies/[companyId]/links/+page.svelte

@@ -55,7 +55,24 @@
 
 	const ALL_CATEGORIES = Object.keys(CATEGORY_LABELS);
 
-	const currentLinks = $derived(
+	type LinkRow = {
+		id: string;
+		category: string;
+		customLabel: string | null;
+		title: string;
+		url: string;
+		description: string | null;
+		faviconUrl: string | null;
+	};
+
+	type GridOpts = {
+		canEdit: boolean;
+		editAction: string;
+		deleteAction: string;
+		emptyMessage: string;
+	};
+
+	const currentLinks = $derived<LinkRow[]>(
 		activeTab === 'company' ? data.companyLinks : data.personalLinks
 	);
 
@@ -67,6 +84,32 @@
 
 	const categoriesPresent = $derived([...new Set(currentLinks.map((l) => l.category))]);
 
+	const companyAddOpts = $derived({
+		canShow: data.canManage,
+		action: '?/addCompanyLink',
+		title: 'Add Company Link'
+	});
+	const personalAddOpts = {
+		canShow: true,
+		action: '?/addPersonalLink',
+		title: 'Add Personal Bookmark'
+	};
+	const companyGridOpts: GridOpts = $derived({
+		canEdit: data.canManage,
+		editAction: '?/updateCompanyLink',
+		deleteAction: '?/deleteCompanyLink',
+		emptyMessage: data.canManage
+			? 'No company links yet. Click "+ New Link" to add the first one.'
+			: 'No company links have been added yet.'
+	});
+	const personalGridOpts: GridOpts = {
+		canEdit: true,
+		editAction: '?/updatePersonalLink',
+		deleteAction: '?/deletePersonalLink',
+		emptyMessage:
+			'No personal bookmarks yet. Bookmarks added here are private to you and scoped to this company.'
+	};
+
 	function firstLetter(title: string): string {
 		const t = title.trim();
 		return (t[0] || '?').toUpperCase();
@@ -80,10 +123,6 @@
 		}
 	}
 
-	const inputCls =
-		'w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white';
-	const labelCls = 'mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300';
-
 	function startEdit(id: string) {
 		editingId = id;
 		showAddForm = false;
@@ -95,102 +134,35 @@
 	}
 
 	function openAdd() {
-		showAddForm = true;
+		showAddForm = !showAddForm;
 		editingId = null;
 		confirmDeleteId = null;
 	}
+
+	function switchTab(tab: Tab) {
+		activeTab = tab;
+		activeCategory = 'all';
+		showAddForm = false;
+		editingId = null;
+		confirmDeleteId = null;
+	}
+
+	const inputCls =
+		'w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white';
+	const labelCls = 'mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300';
 </script>
 
 <svelte:head>
 	<title>Links - {data.company.name}</title>
 </svelte:head>
 
-<div class="space-y-6">
+{#snippet addSection(opts: { canShow: boolean; action: string; title: string })}
-	<header>
+	{#if opts.canShow}
-		<h1 class="text-2xl font-bold text-gray-900 dark:text-white">Links</h1>
-		<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-			Internal tools, dashboards, banking portals, social handles, and anything else the team needs
-			quick access to. Company links are curated by admin/manager; personal bookmarks are private to
-			you.
-		</p>
-	</header>
-
-	{#if form?.error}
-		<div
-			class="rounded-md bg-red-50 p-3 text-sm text-red-700 dark:bg-red-900/30 dark:text-red-300"
-		>
-			{form.error}
-		</div>
-	{/if}
-
-	<!-- Tabs -->
-	<div class="flex gap-1 border-b border-gray-200 dark:border-gray-700">
-		<button
-			type="button"
-			onclick={() => {
-				activeTab = 'company';
-				activeCategory = 'all';
-				showAddForm = false;
-				editingId = null;
-			}}
-			class="whitespace-nowrap border-b-2 px-4 py-2 text-sm font-medium transition-colors {activeTab ===
-			'company'
-				? 'border-blue-500 text-blue-600 dark:text-blue-400'
-				: 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:text-gray-300'}"
-		>
-			Company Links ({data.companyLinks.length})
-		</button>
-		<button
-			type="button"
-			onclick={() => {
-				activeTab = 'personal';
-				activeCategory = 'all';
-				showAddForm = false;
-				editingId = null;
-			}}
-			class="whitespace-nowrap border-b-2 px-4 py-2 text-sm font-medium transition-colors {activeTab ===
-			'personal'
-				? 'border-blue-500 text-blue-600 dark:text-blue-400'
-				: 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:text-gray-300'}"
-		>
-			My Bookmarks ({data.personalLinks.length})
-		</button>
-	</div>
-
-	<!-- Category filter pills -->
-	{#if currentLinks.length > 0}
-		<div class="flex flex-wrap gap-2">
-			<button
-				type="button"
-				onclick={() => (activeCategory = 'all')}
-				class="rounded-full px-3 py-1 text-xs font-medium {activeCategory === 'all'
-					? 'bg-gray-900 text-white dark:bg-white dark:text-gray-900'
-					: 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'}"
-			>
-				All
-			</button>
-			{#each categoriesPresent as cat (cat)}
-				<button
-					type="button"
-					onclick={() => (activeCategory = cat)}
-					class="rounded-full px-3 py-1 text-xs font-medium {activeCategory === cat
-						? 'bg-gray-900 text-white dark:bg-white dark:text-gray-900'
-						: 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'}"
-				>
-					{CATEGORY_LABELS[cat] ?? cat}
-				</button>
-			{/each}
-		</div>
-	{/if}
-
-	{#if activeTab === 'company'}
-		<!-- Company Links -->
-		{#if data.canManage}
 		<section
 			class="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800"
 		>
 			<div class="flex items-center justify-between">
-					<h2 class="font-semibold text-gray-900 dark:text-white">Add Company Link</h2>
+				<h2 class="font-semibold text-gray-900 dark:text-white">{opts.title}</h2>
 				<button
 					type="button"
 					onclick={openAdd}
@@ -203,21 +175,20 @@
 			{#if showAddForm}
 				<form
 					method="POST"
-						action="?/addCompanyLink"
+					action={opts.action}
-						use:enhance={() => async ({ result, update }) => {
+					use:enhance={() => async ({ result, update, formElement }) => {
 						await update({ reset: false });
 						if (result.type === 'success') {
 							showAddForm = false;
-								const formEl = document.querySelector(
+							formElement.reset();
-									'form[action="?/addCompanyLink"]'
-								) as HTMLFormElement | null;
-								formEl?.reset();
 						}
 					}}
 					class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2"
 				>
 					<div class="md:col-span-2">
-							<label for="add-title" class={labelCls}>Title <span class="text-red-500">*</span></label>
+						<label for="add-title" class={labelCls}
+							>Title <span class="text-red-500">*</span></label
+						>
 						<input id="add-title" name="title" type="text" required class={inputCls} />
 					</div>
 					<div class="md:col-span-2">
@@ -253,12 +224,7 @@
 					</div>
 					<div class="md:col-span-2">
 						<label for="add-description" class={labelCls}>Description</label>
-							<textarea
+						<textarea id="add-description" name="description" rows="2" class={inputCls}></textarea>
-								id="add-description"
-								name="description"
-								rows="2"
-								class={inputCls}
-							></textarea>
 					</div>
 					<div class="md:col-span-2 flex justify-end gap-2">
 						<button
@@ -279,22 +245,9 @@
 			{/if}
 		</section>
 	{/if}
+{/snippet}
 
-		{#if filteredLinks.length === 0}
+{#snippet linkCard(link: LinkRow, opts: GridOpts)}
-			<div
-				class="rounded-lg border border-dashed border-gray-300 bg-white p-10 text-center dark:border-gray-700 dark:bg-gray-800"
-			>
-				<p class="text-sm text-gray-500 dark:text-gray-400">
-					{#if data.canManage}
-						No company links yet. Click "+ New Link" to add the first one.
-					{:else}
-						No company links have been added yet.
-					{/if}
-				</p>
-			</div>
-		{:else}
-			<div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
-				{#each filteredLinks as link (link.id)}
 	<div
 		class="group relative flex flex-col gap-2 rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800"
 	>
@@ -345,7 +298,7 @@
 			<p class="text-xs text-gray-600 dark:text-gray-300">{link.description}</p>
 		{/if}
 
-						{#if data.canManage}
+		{#if opts.canEdit}
 			<div
 				class="mt-auto flex justify-end gap-2 border-t border-gray-100 pt-2 dark:border-gray-700"
 			>
@@ -368,7 +321,7 @@
 			{#if confirmDeleteId === link.id}
 				<form
 					method="POST"
-									action="?/deleteCompanyLink"
+					action={opts.deleteAction}
 					use:enhance={() => async ({ update }) => {
 						await update({ reset: false });
 						confirmDeleteId = null;
@@ -398,7 +351,7 @@
 			{#if editingId === link.id}
 				<form
 					method="POST"
-									action="?/updateCompanyLink"
+					action={opts.editAction}
 					use:enhance={() => async ({ result, update }) => {
 						await update({ reset: false });
 						if (result.type === 'success') editingId = null;
@@ -480,15 +433,97 @@
 			{/if}
 		{/if}
 	</div>
-				{/each}
+{/snippet}
-			</div>
+
-		{/if}
+{#snippet linkGrid(opts: GridOpts)}
-	{:else}
+	{#if filteredLinks.length === 0}
-		<!-- My Bookmarks stub -->
 		<div
 			class="rounded-lg border border-dashed border-gray-300 bg-white p-10 text-center dark:border-gray-700 dark:bg-gray-800"
 		>
-			<p class="text-sm text-gray-500 dark:text-gray-400">Personal bookmarks are coming soon.</p>
+			<p class="text-sm text-gray-500 dark:text-gray-400">{opts.emptyMessage}</p>
+		</div>
+	{:else}
+		<div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+			{#each filteredLinks as link (link.id)}
+				{@render linkCard(link, opts)}
+			{/each}
 		</div>
 	{/if}
+{/snippet}
+
+<div class="space-y-6">
+	<header>
+		<h1 class="text-2xl font-bold text-gray-900 dark:text-white">Links</h1>
+		<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+			Internal tools, dashboards, banking portals, social handles, and anything else the team needs
+			quick access to. Company links are curated by admin/manager; personal bookmarks are private to
+			you.
+		</p>
+	</header>
+
+	{#if form?.error}
+		<div
+			class="rounded-md bg-red-50 p-3 text-sm text-red-700 dark:bg-red-900/30 dark:text-red-300"
+		>
+			{form.error}
+		</div>
+	{/if}
+
+	<!-- Tabs -->
+	<div class="flex gap-1 border-b border-gray-200 dark:border-gray-700">
+		<button
+			type="button"
+			onclick={() => switchTab('company')}
+			class="whitespace-nowrap border-b-2 px-4 py-2 text-sm font-medium transition-colors {activeTab ===
+			'company'
+				? 'border-blue-500 text-blue-600 dark:text-blue-400'
+				: 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:text-gray-300'}"
+		>
+			Company Links ({data.companyLinks.length})
+		</button>
+		<button
+			type="button"
+			onclick={() => switchTab('personal')}
+			class="whitespace-nowrap border-b-2 px-4 py-2 text-sm font-medium transition-colors {activeTab ===
+			'personal'
+				? 'border-blue-500 text-blue-600 dark:text-blue-400'
+				: 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:text-gray-300'}"
+		>
+			My Bookmarks ({data.personalLinks.length})
+		</button>
+	</div>
+
+	<!-- Category filter pills -->
+	{#if currentLinks.length > 0}
+		<div class="flex flex-wrap gap-2">
+			<button
+				type="button"
+				onclick={() => (activeCategory = 'all')}
+				class="rounded-full px-3 py-1 text-xs font-medium {activeCategory === 'all'
+					? 'bg-gray-900 text-white dark:bg-white dark:text-gray-900'
+					: 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'}"
+			>
+				All
+			</button>
+			{#each categoriesPresent as cat (cat)}
+				<button
+					type="button"
+					onclick={() => (activeCategory = cat)}
+					class="rounded-full px-3 py-1 text-xs font-medium {activeCategory === cat
+						? 'bg-gray-900 text-white dark:bg-white dark:text-gray-900'
+						: 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'}"
+				>
+					{CATEGORY_LABELS[cat] ?? cat}
+				</button>
+			{/each}
+		</div>
+	{/if}
+
+	{#if activeTab === 'company'}
+		{@render addSection(companyAddOpts)}
+		{@render linkGrid(companyGridOpts)}
+	{:else}
+		{@render addSection(personalAddOpts)}
+		{@render linkGrid(personalGridOpts)}
+	{/if}
 </div>