feat: add bookmark

Author: 0x2E

README.md

@@ -55,7 +55,6 @@ cd build
 
 ## ToDo
 
-- Bookmark
 - PWA
 
 ## Credits

api/api.go

@@ -32,6 +32,9 @@ func Run() {
 	if conf.Debug {
 		r.Debug = true
 		r.Use(middleware.BodyDump(func(c echo.Context, reqBody, resBody []byte) {
+			if len(resBody) > 500 {
+				resBody = append(resBody[:500], []byte("...")...)
+			}
 			r.Logger.Debugf("req: %s\nresp: %s\n", reqBody, resBody)
 		}))
 	}

frontend/src/lib/api/item.ts

@@ -7,6 +7,7 @@ type listOptions = {
 	keyword?: string;
 	feed_id?: number;
 	unread?: boolean;
+	bookmark?: boolean;
 };
 
 export async function listItems(options?: listOptions) {
@@ -21,10 +22,14 @@ export async function getItem(id: number) {
 	return api.get('items/' + id).json<Item>();
 }
 
-export async function updateItem(id: number, unread: boolean) {
+export async function updateItem(
+	id: number,
+	data: {
+		unread?: boolean;
+		bookmark?: boolean;
+	}
+) {
 	return api.patch('items/' + id, {
-		json: {
-			unread: unread
-		}
+		json: data
 	});
 }

frontend/src/lib/api/model.ts

@@ -20,5 +20,6 @@ export type Item = {
 	content: string;
 	pub_date: Date;
 	unread: boolean;
+	bookmark: boolean;
 	feed: { id: number; name: string };
 };

frontend/src/lib/components/ItemAction.svelte

@@ -1,5 +1,11 @@
 <script lang="ts">
-	import { CheckIcon, ExternalLinkIcon, UndoIcon } from 'lucide-svelte';
+	import {
+		BookmarkIcon,
+		BookmarkXIcon,
+		CheckIcon,
+		ExternalLinkIcon,
+		UndoIcon
+	} from 'lucide-svelte';
 	import type { ComponentType } from 'svelte';
 	import type { Icon } from 'lucide-svelte';
 	import * as Tooltip from '$lib/components/ui/tooltip';
@@ -12,47 +18,53 @@
 		id: number;
 		link: string;
 		unread: boolean;
+		bookmark: boolean;
 	};
 
 	function getActions(
-		unread: boolean
+		unread: boolean,
+		bookmark: boolean
 	): { icon: ComponentType<Icon>; tooltip: string; handler: (e: Event) => void }[] {
-		const list = [
-			// { icon: BookmarkIcon, tooltip: 'Save to Bookmark', handler: handleSaveToBookmark },
-			{ icon: ExternalLinkIcon, tooltip: 'Visit Original Link', handler: handleExternalLink }
-		];
+		const visitOriginalAction = {
+			icon: ExternalLinkIcon,
+			tooltip: 'Visit Original Link',
+			handler: handleExternalLink
+		};
 		const unreadAction = unread
-			? { icon: CheckIcon, tooltip: 'Mark as Read', handler: handleMarkAsRead }
-			: { icon: UndoIcon, tooltip: 'Mark as Unread', handler: handleMarkAsUnread };
-		list.unshift(unreadAction);
-		return list;
+			? { icon: CheckIcon, tooltip: 'Mark as Read', handler: handleToggleUnread }
+			: { icon: UndoIcon, tooltip: 'Mark as Unread', handler: handleToggleUnread };
+		const bookmarkAction = bookmark
+			? { icon: BookmarkXIcon, tooltip: 'Cancel Bookmark', handler: handleToggleBookmark }
+			: { icon: BookmarkIcon, tooltip: 'Add to Bookmark', handler: handleToggleBookmark };
+
+		return [unreadAction, bookmarkAction, visitOriginalAction];
 	}
-	$: actions = getActions(data.unread);
+	$: actions = getActions(data.unread, data.bookmark);
 
-	async function handleMarkAsRead(e: Event) {
+	async function handleToggleUnread(e: Event) {
 		e.preventDefault();
 		try {
-			await updateItem(data.id, false);
+			await updateItem(data.id, { unread: !data.unread });
+			invalidateAll();
 		} catch (e) {
 			toast.error((e as Error).message);
 		}
-		invalidateAll();
 	}
 
-	async function handleMarkAsUnread(e: Event) {
+	function handleExternalLink(e: Event) {
+		e.preventDefault();
+		handleToggleUnread(e);
+		window.open(data.link, '_target');
+	}
+
+	async function handleToggleBookmark(e: Event) {
 		e.preventDefault();
 		try {
-			await updateItem(data.id, true);
+			await updateItem(data.id, { bookmark: !data.bookmark });
+			invalidateAll();
 		} catch (e) {
 			toast.error((e as Error).message);
 		}
-		invalidateAll();
-	}
-
-	function handleExternalLink(e: Event) {
-		e.preventDefault();
-		handleMarkAsRead(e);
-		window.open(data.link, '_target');
 	}
 </script>
 

frontend/src/lib/components/ItemList.svelte

@@ -60,7 +60,9 @@
 					</div>
 
 					<div class="w-full hidden group-hover:inline-flex justify-end">
-						<ItemAction data={{ id: item.id, link: item.link, unread: item.unread }} />
+						<ItemAction
+							data={{ id: item.id, link: item.link, unread: item.unread, bookmark: item.bookmark }}
+						/>
 					</div>
 				</div>
 			</Button>

frontend/src/lib/components/Navbar.svelte

@@ -9,6 +9,7 @@
 	}
 	let links: link[] = [
 		{ label: 'Unread', url: '/' },
+		{ label: 'Bookmark', url: '/bookmarks' },
 		{ label: 'All', url: '/all' },
 		{ label: 'Feeds', url: '/feeds' }
 	];
@@ -31,7 +32,7 @@
 
 <nav class="block w-full sm:mt-3 mb-6">
 	<div
-		class="flex justify-around items-center w-full sm:max-w-sm mx-auto px-6 py-4 sm:rounded-2xl shadow-md sm:border bg-background"
+		class="flex justify-around items-center w-full sm:max-w-[600px] mx-auto px-6 py-4 sm:rounded-2xl shadow-md sm:border bg-background"
 	>
 		<div class="flex items-center">
 			<img src="/favicon.png" alt="logo" class="w-10" />

frontend/src/routes/bookmarks/+page.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import ItemList from '$lib/components/ItemList.svelte';
+	import PageHead from '$lib/components/PageHead.svelte';
+
+	export let data: PageData;
+</script>
+
+<svelte:head>
+	<title>Bookmark</title>
+</svelte:head>
+
+<PageHead title="Bookmark" />
+<ItemList data={data.items} />

frontend/src/routes/bookmarks/+page.ts

@@ -0,0 +1,6 @@
+import { listItems } from '$lib/api/item';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = () => {
+	return listItems({ bookmark: true });
+};

frontend/src/routes/items/+page.svelte

@@ -57,7 +57,7 @@
 <p class="text-sm text-muted-foreground">
 	{data.feed.name} / {moment(data.pub_date).format('lll')}
 </p>
-<ItemAction data={{ id: data.id, link: data.link, unread: data.unread }} />
+<ItemAction data={{ id: data.id, link: data.link, unread: data.unread, bookmark: data.bookmark }} />
 <article class="mt-6 prose dark:prose-invert prose-lg max-w-full">
 	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html data.content}