Add 1/2/3-column layout option to the Bookmarks widget

The bookmarks list can now render as 1 (default), 2, or 3 columns
instead of always being a single-column list, admin-configurable via
a pill picker on the Widgets tab. Column count lives in widget_kv
(same idiom as weather's config) and rides along in the public
GET /api/widget/bookmarks response so the sidebar picks it up without
a separate request.

backend/src/widgets/bookmarks/db.ts

@@ -1,5 +1,6 @@
 import { randomUUID } from 'node:crypto';
 import { db } from '../../storage/db/index.js';
+import { getKv, setKv } from '../../storage/db/widgetKv.js';
 import type { Bookmark } from '../../storage/db/types.js';
 
 function rowToBookmark(row: any): Bookmark {
@@ -44,3 +45,14 @@ export function updateBookmark(id: string, patch: { name?: string; url?: string;
 export function deleteBookmark(id: string) {
 	db.prepare('DELETE FROM widget_bookmarks_items WHERE id = ?').run(id);
 }
+
+// How many columns the sidebar/admin panel lays the bookmark list out in — stored in
+// widget_kv rather than a bespoke table since it's a single scalar, same idiom as weather's
+// config (see widgets/weather/db.ts).
+export function getColumns(): 1 | 2 | 3 {
+	return getKv<{ columns: 1 | 2 | 3 }>('bookmarks', 'config')?.columns ?? 1;
+}
+
+export function setColumns(columns: 1 | 2 | 3) {
+	setKv('bookmarks', 'config', { columns });
+}

backend/src/widgets/bookmarks/plugin.ts

@@ -31,14 +31,25 @@ export const bookmarksPlugin: WidgetPlugin = {
 	registerPublicRoutes(app) {
 		app.get('/api/widget/bookmarks', async (req) => {
 			const bookmarks = bookmarksDb.listBookmarks();
-			if (hasPrivateAccess(req)) return bookmarks;
-			return bookmarks.filter((b) => !b.isPrivate);
+			const items = hasPrivateAccess(req) ? bookmarks : bookmarks.filter((b) => !b.isPrivate);
+			return { items, columns: bookmarksDb.getColumns() };
 		});
 	},
 
 	registerAdminRoutes(app) {
 		app.get('/api/admin/widget/bookmarks', async () => bookmarksDb.listBookmarks());
 
+		app.get('/api/admin/widget/bookmarks/config', async () => ({ columns: bookmarksDb.getColumns() }));
+
+		app.patch('/api/admin/widget/bookmarks/config', async (req, reply) => {
+			const { columns } = req.body as { columns?: number };
+			if (columns !== 1 && columns !== 2 && columns !== 3) {
+				return reply.code(400).send({ error: 'columns must be 1, 2, or 3' });
+			}
+			bookmarksDb.setColumns(columns);
+			return { columns };
+		});
+
 		app.post('/api/admin/widget/bookmarks', async (req, reply) => {
 			const { name, url, isPrivate } = req.body as { name?: string; url?: string; isPrivate?: boolean };
 			if (!name || !name.trim() || !url || !url.trim()) {

frontend/src/lib/adminApi.ts

@@ -12,6 +12,7 @@ import type {
 	GeocodeResult,
 	AdminStockTicker,
 	AdminBookmark,
+	AdminBookmarksConfig,
 	Poe2BrowseEntry,
 	AdminPoe2Entry,
 	AdminWeatherSettings,
@@ -239,6 +240,16 @@ export const updateBookmark = (id: string, patch: { name?: string; url?: string;
 export const deleteBookmark = (id: string, fetchFn?: typeof fetch) =>
 	request<void>(`/api/admin/widget/bookmarks/${id}`, { method: 'DELETE' }, fetchFn);
 
+export const getBookmarksConfig = (fetchFn?: typeof fetch) =>
+	request<AdminBookmarksConfig>('/api/admin/widget/bookmarks/config', {}, fetchFn);
+
+export const updateBookmarksConfig = (columns: 1 | 2 | 3, fetchFn?: typeof fetch) =>
+	request<AdminBookmarksConfig>(
+		'/api/admin/widget/bookmarks/config',
+		{ method: 'PATCH', body: JSON.stringify({ columns }) },
+		fetchFn
+	);
+
 // PoE2 — league is always auto-detected, never admin-set (see widgets/poe2/poll.ts).
 export const browsePoe2Currencies = (fetchFn?: typeof fetch) =>
 	request<Poe2BrowseEntry[]>('/api/admin/widget/poe2/browse', {}, fetchFn);

frontend/src/lib/adminTypes.ts

@@ -95,6 +95,11 @@ export interface AdminBookmark {
 	isPrivate: boolean;
 }
 
+/** Response from GET/PATCH /api/admin/widget/bookmarks/config — how many columns the sidebar/widget layout uses. */
+export interface AdminBookmarksConfig {
+	columns: 1 | 2 | 3;
+}
+
 export interface Poe2BrowseEntry {
 	id: string;
 	name: string;

frontend/src/lib/api.ts

@@ -1,5 +1,5 @@
 import { getBackendUrl } from './config';
-import type { MergedArticle, Tag, TrackedEventPublic, Category, Weather, StockTicker, Bookmark, Poe2Data, WidgetsEnabled } from './types';
+import type { MergedArticle, Tag, TrackedEventPublic, Category, Weather, StockTicker, BookmarksFeed, Poe2Data, WidgetsEnabled } from './types';
 
 async function get<T>(path: string, fetchFn: typeof fetch = fetch): Promise<T> {
 	// credentials: 'include' so the private-access cookie (see lib/privateAccess.ts)
@@ -54,8 +54,8 @@ export function getStocks(fetchFn?: typeof fetch): Promise<StockTicker[]> {
 	return get<StockTicker[]>('/api/widget/stocks', fetchFn);
 }
 
-export function getBookmarks(fetchFn?: typeof fetch): Promise<Bookmark[]> {
-	return get<Bookmark[]>('/api/widget/bookmarks', fetchFn);
+export function getBookmarks(fetchFn?: typeof fetch): Promise<BookmarksFeed> {
+	return get<BookmarksFeed>('/api/widget/bookmarks', fetchFn);
 }
 
 export function getPoe2(fetchFn?: typeof fetch): Promise<Poe2Data> {

frontend/src/lib/components/admin/BookmarksTab.svelte

@@ -1,12 +1,20 @@
 <script lang="ts">
-	import type { AdminBookmark } from '$lib/adminTypes';
-	import { addBookmark, updateBookmark, deleteBookmark } from '$lib/adminApi';
+	import type { AdminBookmark, AdminBookmarksConfig } from '$lib/adminTypes';
+	import { addBookmark, updateBookmark, deleteBookmark, updateBookmarksConfig } from '$lib/adminApi';
 
-	let { bookmarks: initial }: { bookmarks: AdminBookmark[] } = $props();
+	let { bookmarks: initial, config }: { bookmarks: AdminBookmark[]; config: AdminBookmarksConfig } = $props();
 	let bookmarks = $state([...initial]);
+	let columns = $state(config.columns);
 	let showAdd = $state(false);
 	let newBookmark = $state({ name: '', url: '', isPrivate: false });
 
+	async function setColumns(n: 1 | 2 | 3) {
+		columns = n;
+		await updateBookmarksConfig(n);
+	}
+
+	const columnOptions: (1 | 2 | 3)[] = [1, 2, 3];
+
 	let editingId = $state<string | null>(null);
 	let editForm = $state({ name: '', url: '' });
 
@@ -47,6 +55,14 @@
 
 <div class="toolbar">
 	<span class="count">{bookmarks.length} bookmarks</span>
+	<div class="columns-picker">
+		<span class="field-label">Columns</span>
+		<div class="pill-row">
+			{#each columnOptions as n}
+				<button class="pill" class:active={columns === n} onclick={() => setColumns(n)}>{n}</button>
+			{/each}
+		</div>
+	</div>
 	<button class="add-btn" onclick={() => (showAdd = !showAdd)}>+ New bookmark</button>
 </div>
 
@@ -102,12 +118,40 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
+		gap: 12px;
+		flex-wrap: wrap;
 		margin-bottom: 12px;
 	}
 	.count {
 		font-size: 12px;
 		color: var(--text-muted);
 	}
+	.columns-picker {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+	.field-label {
+		font-size: 11px;
+		color: var(--text-muted);
+	}
+	.pill-row {
+		display: flex;
+		gap: 6px;
+	}
+	.pill {
+		font-size: 12px;
+		padding: 4px 10px;
+		border-radius: var(--radius);
+		border: 0.5px solid var(--border);
+		background: var(--surface-2);
+		color: var(--text-secondary);
+	}
+	.pill.active {
+		background: var(--pill-bg);
+		color: var(--pill-text);
+		border-color: var(--pill-bg);
+	}
 	.add-btn {
 		font-size: 12px;
 		padding: 6px 12px;

frontend/src/lib/components/admin/WidgetsTab.svelte

@@ -3,6 +3,7 @@
 		AdminSettings,
 		AdminStockTicker,
 		AdminBookmark,
+		AdminBookmarksConfig,
 		AdminPoe2Entry,
 		AdminWeatherSettings,
 		InstalledWidget,
@@ -20,6 +21,7 @@
 		settings,
 		stockTickers,
 		bookmarks,
+		bookmarksConfig,
 		poe2Watchlist,
 		weatherConfig,
 		poe2,
@@ -28,6 +30,7 @@
 		settings: AdminSettings;
 		stockTickers: AdminStockTicker[];
 		bookmarks: AdminBookmark[];
+		bookmarksConfig: AdminBookmarksConfig;
 		poe2Watchlist: AdminPoe2Entry[];
 		weatherConfig: AdminWeatherSettings;
 		poe2: Poe2Data;
@@ -138,7 +141,7 @@
 		{:else if key === 'stocks'}
 			<StocksTab tickers={stockTickers} />
 		{:else if key === 'bookmarks'}
-			<BookmarksTab {bookmarks} />
+			<BookmarksTab {bookmarks} config={bookmarksConfig} />
 		{:else if key === 'poe2'}
 			<Poe2Tab {poe2} watchlist={poe2Watchlist} />
 		{/if}

frontend/src/lib/components/sidebar/BookmarksWidget.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import type { Bookmark } from '$lib/types';
 
-	let { bookmarks }: { bookmarks: Bookmark[] } = $props();
+	let { bookmarks, columns = 1 }: { bookmarks: Bookmark[]; columns?: 1 | 2 | 3 } = $props();
 </script>
 
 <div class="widget">
 	<span class="title">Bookmarks</span>
 	{#if bookmarks.length > 0}
-		<div class="list">
+		<div class="list" class:grid={columns > 1} style:grid-template-columns={columns > 1 ? `repeat(${columns}, 1fr)` : undefined}>
 			{#each bookmarks as bookmark (bookmark.id)}
 				<a class="row" href={bookmark.url} target="_blank" rel="noopener noreferrer">{bookmark.name}</a>
 			{/each}
@@ -33,6 +33,10 @@
 		flex-direction: column;
 		margin-top: 8px;
 	}
+	.list.grid {
+		display: grid;
+		gap: 6px;
+	}
 	.row {
 		font-size: 13px;
 		padding: 6px 0;
@@ -42,6 +46,15 @@
 	.row:first-child {
 		border-top: none;
 	}
+	.list.grid .row {
+		border-top: none;
+		padding: 6px 8px;
+		background: var(--surface-2);
+		border-radius: var(--radius);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
 	.row:hover {
 		color: var(--text-accent);
 	}

frontend/src/lib/components/sidebar/Sidebar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { tick } from 'svelte';
-	import type { Weather, StockTicker, Bookmark, Poe2Data, WidgetsEnabled } from '$lib/types';
+	import type { Weather, StockTicker, BookmarksFeed, Poe2Data, WidgetsEnabled } from '$lib/types';
 	import WeatherWidget from './WeatherWidget.svelte';
 	import StocksWidget from './StocksWidget.svelte';
 	import BookmarksWidget from './BookmarksWidget.svelte';
@@ -17,7 +17,7 @@
 	}: {
 		weather: Weather;
 		stocks: StockTicker[];
-		bookmarks: Bookmark[];
+		bookmarks: BookmarksFeed;
 		poe2: Poe2Data;
 		widgetsEnabled: WidgetsEnabled;
 	} = $props();
@@ -100,7 +100,7 @@
 				{:else if key === 'poe2' && widgetsEnabled.poe2}
 					<Poe2Widget {poe2} />
 				{:else if key === 'bookmarks' && widgetsEnabled.bookmarks}
-					<BookmarksWidget {bookmarks} />
+					<BookmarksWidget bookmarks={bookmarks.items} columns={bookmarks.columns} />
 				{/if}
 			{/each}
 			{#each widgetsEnabled.pluggable as w (w.id)}

frontend/src/lib/types.ts

@@ -159,6 +159,12 @@ export interface Bookmark {
 	isPrivate: boolean;
 }
 
+/** Response from GET /api/widget/bookmarks — items plus the admin-configured sidebar layout width. */
+export interface BookmarksFeed {
+	items: Bookmark[];
+	columns: 1 | 2 | 3;
+}
+
 export interface Poe2WatchlistEntry {
 	id: string;
 	baseName: string;

frontend/src/routes/admin/settings/+page.svelte

@@ -48,6 +48,7 @@
 			settings={data.settings}
 			stockTickers={data.stockTickers}
 			bookmarks={data.bookmarks}
+			bookmarksConfig={data.bookmarksConfig}
 			poe2Watchlist={data.poe2Watchlist}
 			weatherConfig={data.weatherConfig}
 			poe2={data.poe2}

frontend/src/routes/admin/settings/+page.ts

@@ -10,6 +10,7 @@ import {
 	getLogs,
 	getStockTickers,
 	getAdminBookmarks,
+	getBookmarksConfig,
 	getPoe2Watchlist,
 	getWeatherConfig,
 	listWidgets
@@ -21,19 +22,31 @@ const EMPTY_MODELS: ModelCatalog = { embedding: [], image: [], synthesis: [] };
 
 export const load: PageLoad = async ({ fetch }) => {
 	try {
-		const [settings, sources, events, logs, stockTickers, bookmarks, poe2Watchlist, weatherConfig, poe2, installedWidgets] =
-			await Promise.all([
-				getSettings(fetch),
-				getSources(fetch),
-				getEvents(fetch),
-				getLogs({}, fetch),
-				getStockTickers(fetch),
-				getAdminBookmarks(fetch),
-				getPoe2Watchlist(fetch),
-				getWeatherConfig(fetch),
-				getPoe2(fetch),
-				listWidgets(fetch)
-			]);
+		const [
+			settings,
+			sources,
+			events,
+			logs,
+			stockTickers,
+			bookmarks,
+			bookmarksConfig,
+			poe2Watchlist,
+			weatherConfig,
+			poe2,
+			installedWidgets
+		] = await Promise.all([
+			getSettings(fetch),
+			getSources(fetch),
+			getEvents(fetch),
+			getLogs({}, fetch),
+			getStockTickers(fetch),
+			getAdminBookmarks(fetch),
+			getBookmarksConfig(fetch),
+			getPoe2Watchlist(fetch),
+			getWeatherConfig(fetch),
+			getPoe2(fetch),
+			listWidgets(fetch)
+		]);
 
 		// The AI service (Ollama) may not be running yet — that shouldn't take down the
 		// whole settings page, just leave the Models/Connections tabs showing "unreachable".
@@ -59,6 +72,7 @@ export const load: PageLoad = async ({ fetch }) => {
 			logs,
 			stockTickers,
 			bookmarks,
+			bookmarksConfig,
 			poe2Watchlist,
 			weatherConfig,
 			poe2,